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

Posted 2023-03-06

【中文标题】如何将svg图标添加到带有文本的按钮

【英文标题】：How to add svg icon to a button with a text

【发布时间】：2018-10-04 11:35:07

【问题描述】：

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

【问题讨论】：

尝试增加左填充，并为背景图像分配宽度和高度。

指定背景尺寸

【参考方案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>

【讨论】：

很好的例子，谢谢你，准备学习这个。谢谢

【参考方案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
  

【参考方案3】：

.custom-btn .ico-btn 
    color: grey;
    padding: 12px 16px 12px 40px;
    background:url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg) no-repeat 13px 9px;
    background-size: 25px auto;
    background-color:#eaeaea;
 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="custom-btn">
  <button class="btn ico-btn">Button </button>
<div>

【讨论】：

为什么我们需要引导程序？

@patelarpan ，问题有 twitter-bootstrap3 标签

实际上需要一个引导程序，所以这个按钮可以在网格内响应

【参考方案4】：

几种选择

.btn 
 border: none;
 color: grey;
 font-size: 16px;
 cursor: pointer;
 padding: 12px 16px;
 

 .btn:before 
 content: "";
 display: block;
 background:url("http://alexfeds.com/wpcontent/
 uploads/2018/04/save_icon.svg") no-repeat;
 width: 16px;
 height: 16px;
 float: left;
 margin: 0 6px 0 0;
 
 .btn2 
 border: none;
 color: grey;
 padding: 12px 16px 12px 50px;
 font-size: 16px;
 cursor: pointer;
 background-image: url("http://alexfeds.com/wp- 
 content/uploads/2018/04/save_icon.svg");
 background-repeat: repeat-y;
 

 a 
 text-decoration: none;
 color: #515151;
 display: inline-block;
 background-color: #dfdfdf;
 padding: 12px 16px;
 
 a:before 
 font-family: FontAwesome;
 content: "\f15b";
 display: inline-block;
 padding-right: 10px;
 vertical-align: middle;
 font-size: 20px;
 

演示 - jsfiddle