如何将svg图标添加到带有文本的按钮中
如何将svg图标添加到带有文本的按钮中
提问于 2018-04-24 09:13:49
我有一个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图标和旁边的文字描述？
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-04-24 09:24:21
我通常使用伪元素。请核对下列结果：
.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>
Stack Overflow用户
发布于 2018-04-24 09:16:37
尝试增加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
} Stack Overflow用户
发布于 2018-04-24 09:21:26
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49997745
复制相关文章
相似问题
腾讯云开发者
