如何将 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 图标并在其旁边添加文字说明？

原文由 AlexFF1 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 hoangkianh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试增加图标的 padding-left 并设置 background-size 。不需要 background-repeat 到 repeat-y ，使用 no-repeat 代替。

 .btn {
     border: none;
     color: grey;
     padding: 12px 16px 12px 36px; // Changed padding-left value, set as per your requirement
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp-
     content/uploads/2018/04/save_icon.svg");
     background-size: 25px auto; //Set as per your requirement
     background-repeat: no-repeat; // Changed
 }

原文由 Zuber 发布，翻译遵循 CC BY-SA 3.0 许可协议