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图标不是图像。 它们是字体 ，这就是它们响应CSS color属性更改的原因。

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

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文件。 这仅仅是为了避免从浏览器进行一次额外的往返。