html - 如何将 svg 图标添加到带有文本的按钮

Question

我有svg图标的来源svgIcon .我需要将此图标添加到按钮。它看起来与此非常相似

我试过这个:

CSS

  .btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-repeat: repeat-y;
       }

   <button class="btn"> Save</button>

但结果是这样的:

如何在按钮内添加 svg 图标并在其旁边添加文字说明？

Answer 1

我通常使用伪元素。请检查以下结果:

.btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
 }
 
 .btn:before {
   content: url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg);
   width: 20px;
   float: left;
   margin-right: 5px;
   margin-top: -2px;
 }

<button class="btn">Save</button>