Font-Awesome中没有标尺图标

Question

我在我的项目中使用Font-Awesome并且我需要一个标尺图标，此时我创建了一个带有background-image标尺图标的按钮，但如果它悬停则不会改变颜色。

如何在此按钮上添加Font-Awesome的相同功能？

我需要使其响应，button button:hover的颜色对于每个客户都会有所不同，因此我无法创建200个图标。

使用font-awesome，我只需使用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;
}

使用Font-Awesome，您可以使用css color更改图标颜色

Answer 1

FontAwesome图标不是图片。它们是 fonts ，这就是它们响应CSS color属性更改的原因。

要获得类似的效果，您需要另一个提供此类字体图标的库中的标尺图标。当FontAwesome没有特定图标时，我通常会转到{{3}}。从那里你可以将图标下载为字体。

FlatIcon.com的步骤如下：

1. 将所选图标添加到集合中。

2. 以IconFont格式下载该集合。这将下载一个包含CSS文件和另一组字体文件的zip文件（适用于不同的浏览器）。

3. 现在您只需在HTML页面中引用此CSS文件，并通过向元素添加特定类来创建图标：

   <span class="flaticon-ruler"></span>
   

   您还可以使用CSS样式为这些图标着色：

   <span class="flaticon-ruler" style="color: red;"></span>
   

4. [可选] 将CSS规则从下载的CSS文件移动到您自己的CSS文件中。这只是为了避免从浏览器进行额外的往返。