正文 

当前位置： 首页 > 源码 >

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

     2023-03-06     261

关键词：

【中文标题】如何将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;
 
&lt;button class="btn"&gt;Save&lt;/button&gt;

【讨论】：

很好的例子，谢谢你，准备学习这个。谢谢【参考方案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

【讨论】：

如何将通知编号添加到按钮图标？

】如何将通知编号添加到按钮图标？【英文标题】：Howtoaddnotificationnumbertoabuttonicon?【发布时间】：2019-06-0620:28:05【问题描述】：我正在尝试使用PyQt5制作GUI。它将有一个带有图标的通知按钮。我想在图标上添加一个带有通知数量... 查看详情

如何制作带有矩形 SVG 图标的方形图标按钮

】如何制作带有矩形SVG图标的方形图标按钮【英文标题】：HowtoMakeSquareIconButtonswithRectangularSVGIconsInsideThem【发布时间】：2019-07-0316:30:15【问题描述】：我正在尝试使用React、样式组件和SVG制作我自己的图标按钮。我的图标通常是... 查看详情

如何将自定义视图添加到 JSQMessagesViewController 单元格，以便它包含一个带有一些按钮和文本视图的视图？

】如何将自定义视图添加到JSQMessagesViewController单元格，以便它包含一个带有一些按钮和文本视图的视图？【英文标题】：HowtoaddcustomviewtoJSQMessagesViewControllercellsothatitincludesoneviewwithsomebuttonsandtextview?【发布时间】：2016-09-0714:48:42... 查看详情

如何将按钮或图像添加到道场网格

】如何将按钮或图像添加到道场网格【英文标题】：Howtoaddbuttonorimagestodojogrid【发布时间】：2012-07-0106:55:57【问题描述】：我有一个带有json数据存储的dojo网格（mysql结果集转换为json格式）。目前我的网格显示5列，如下图所示：... 查看详情

Javascript将数字添加到带有按钮的文本框[重复]

】Javascript将数字添加到带有按钮的文本框[重复]【英文标题】：Javascriptaddinganumbertoatextboxwithabutton[duplicate]【发布时间】：2018-06-0503:22:14【问题描述】：也许是一个愚蠢的问题，但我正在尝试获取文本框中的一个数字并通过按一... 查看详情

iOS Swift 将 SVG 图像添加到按钮，如 Android

...们可以将SVG导入为VectorXML，将此用作可绘制对象，更改SVG图标的颜色并添加到按钮voidsetSvgIcnForBtnFnc(ButtonsetBtnVar,intsetSvgVar,intse 查看详情

将 FontAwesome 图标添加到 D3 图表

】将FontAwesome图标添加到D3图表【英文标题】：AddingFontAwesomeiconstoaD3graph【发布时间】：2013-08-2707:50:28【问题描述】：我试图在我的D3节点中设置一个带有FontAwesome的图标，而不是文本。这是原来的实现，带文字：g.append(\'svg:text\').... 查看详情

如何使 QPushButtons 将文本添加到 QLineEdit 框中？

】如何使QPushButtons将文本添加到QLineEdit框中？【英文标题】：HowtomakeQPushButtonstoaddtextintoQLineEditbox?【发布时间】：2011-11-2913:14:26【问题描述】：我使用QtCreator制作了一个带有60个QPushButton和一个QLineEdit的“键盘”窗口。如何制作按... 查看详情

如何将带有文本的图像添加到 UIAlertView？

】如何将带有文本的图像添加到UIAlertView？【英文标题】：HowtoaddimagewithtextintoUIAlertView?【发布时间】：2013-05-2312:32:49【问题描述】：我想将带有一些文本的图像添加到UIAlertView中，如下图这是我的代码UIAlertView*alert=[[UIAlertViewalloc]... 查看详情

颤振将svg添加到特定部分

】颤振将svg添加到特定部分【英文标题】：flutterwithaddsvgtoaspecificpart【发布时间】：2021-11-0711:49:02【问题描述】：我目前有一个带有这样图像的页面，但我想将svg图像添加到底部的按钮部分，如第二张图像所示。我该怎么做？图... 查看详情

如何将带有完成按钮的工具栏添加到 UIPickerView？

】如何将带有完成按钮的工具栏添加到UIPickerView？【英文标题】：HowtoaddToolBarwithdonebuttontoUIPickerView?【发布时间】：2017-11-2409:35:09【问题描述】：我想在Xamarin.iOS项目中有一个UIPickerView。我需要的UIPicker必须是这样的（默认隐藏并... 查看详情

如何将新行添加到数据表 vb.net

】如何将新行添加到数据表vb.net【英文标题】：howtoaddnewrowsintoadatatablevb.net【发布时间】：2012-03-0700:54:48【问题描述】：我有一个带有文本框和“添加”按钮的表单。用户可以在文本框中写下一个名称，然后单击“添加”按钮。... 查看详情

如何将图像或图标添加到 Pygame 中的按钮矩形？

】如何将图像或图标添加到Pygame中的按钮矩形？【英文标题】：HowcanIaddanimageoricontoabuttonrectangleinPygame?【发布时间】：2021-03-0711:37:09【问题描述】：我是Pygame的新手，我已经为我的按钮创建了代码，但我仍然有一个问题，因为我... 查看详情

CToolbar 是不是支持带有 32 位图标的按钮？

...化）。我在WEB遇到的2类话题，和我的问题有关：1-st告诉如何将32位图像添加到CToolBar第二个（实际上是 查看详情

如何将“其他”文本输入添加到 HTML 表单中的一组单选按钮？

】如何将“其他”文本输入添加到HTML表单中的一组单选按钮？【英文标题】：HowcanIaddan"Other"textinputtoasetofradiobuttonsinanHTMLform?【发布时间】：2010-11-1617:49:38【问题描述】：我正在尝试创建一个带有写入“其他”选项作为最... 查看详情

如何通过按添加按钮添加新单元格并将文本保存到 Coredata

】如何通过按添加按钮添加新单元格并将文本保存到Coredata【英文标题】：HowtoaddanewcellbypressaAddbuttonandsavethetextintoCoredata【发布时间】：2017-04-1202:52:28【问题描述】：我有一个带有tableview的ViewController和一个单独的nib用于创建tablev... 查看详情

如何将带有按钮的视图（目标操作）添加到滚动视图

】如何将带有按钮的视图（目标操作）添加到滚动视图【英文标题】：Howtoaddviewwithbuttons(target-action)toascrollview【发布时间】：2014-04-1207:34:19【问题描述】：我创建了一个自定义UIViewController，其视图位于InterfaceBuilder中创建的.xib文... 查看详情

将带有指定标志图标的网站书签添加到手机主屏幕

】将带有指定标志图标的网站书签添加到手机主屏幕【英文标题】：Addbookmarkofwebsitewithspecifiedlogoicontothehomescreenofmobile【发布时间】：2018-06-1916:07:23【问题描述】：我需要将我网站的书签添加到手机的主屏幕。书签应包含指定的... 查看详情