字体中没有标尺图标-太棒了
字体中没有标尺图标-太棒了
提问于 2018-01-19 15:07:32
我在我的项目中使用字体-太棒了，我需要一个标尺图标，目前我创建了一个带有background-image标尺图标的按钮，但是如果鼠标悬停，它不会改变颜色。
我怎样才能在这个按钮上添加字体的相同功能？
我需要使它响应，button button:hover的颜色将是不同的每个客户端，所以我不能创建200个图标。
使用字体棒时，我只需使用css color来更改图标的颜色。
这里是一个屏幕截图，它现在的样子，打印是hover颜色
在这里，我使用的代码：
<button type="button" class="custbtn"><em class="fa fa-minus" aria-hidden="true"></em></button>
<button type="button" class="custbtn"><em class="fa fa-plus" aria-hidden="true"></em></button>
<button class="custbtn" id="tlruler" value="off"></button>
.custbtn {
background: #0b3c5d;
color: #fff;
}
.custbtn:hover {
background: #328cc1;
color: #d9b310;
}
#tlruler {
background-image: url("../images/ruler.png");
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
}使用字体-太棒了，您可以使用css color更改图标颜色。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-19 15:28:20
FontAwesome图标不是图像。它们是字体，这就是它们响应CSS color属性更改的原因。
为了获得类似的效果，您需要另一个库中提供这样的字体图标的标尺图标。当FlatIcon没有特定的图标时，我通常会去FontAwesome。从那里你可以下载图标作为字体。
FlatIcon.com的步骤是：
- 将选定的图标添加到集合中。
- 以IconFont格式下载集合。这将下载一个zip文件，其中包含CSS文件和另一组字体文件(适用于不同的浏览器)。
- 现在，您可以简单地在HTML页面中引用这个CSS文件，并通过向元素添加特定的类来创建图标： 您还可以用CSS样式对这些图标着色：
- 可选将CSS规则从下载的CSS文件移动到您自己的CSS文件中。这仅仅是为了避免在浏览器中进行一次额外的往返。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48344038
复制相关文章
相似问题
腾讯云开发者
