Question

我正在使用它：

<span class='fa fa-fw fa-stop'></span>

但它显示了一个非常大的广场。有谁知道是否可以让它只显示正方形的轮廓？

Answer 1

此处给出了另一种解决方案，可用于所有字体真棒图标： Is it possible to color the fontawesome icon colors?

css看起来像这样：

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
color: transparent;

Answer 2

您可以使用fa-square-o，也可以使用fa-stop并使用CSS颜色和边框规则来实现没有圆角的框的效果。

这是一个链接：

http://jsfiddle.net/5mcddx2q/

.fa {
  color:rgba(0,0,0,0);
  border:1px solid red;
}

或者你可以在另一组字体图标中搜索一个概述框，这些字体图标不是字体太棒了，还有一些在引导程序中。

Answer 3

基于webkit的解决方案的问题在于它们只能在webkit浏览器中运行。稍微便于使用的解决方案是将图标的颜色设置为与背景相同（或透明），并使用text-shadow创建轮廓：

.fa-outline-dark-gray {
    color: #fff;
    text-shadow: -1px -1px 0 #999,
            1px -1px 0 #999,
           -1px 1px 0 #999,
            1px 1px 0 #999;
}

它在ie＆lt; 10中不起作用，但至少它不限于webkit浏览器。

Answer 4

对于未来遇到这种情况的人：我正在解决类似的问题，并提出了一个可能有效的解决方案，具体取决于您的方案和特定图标。我有一个蓝色背景，想要一个白色的复选标记轮廓，内部保留蓝色。我最终做的是创建两个复选标记图标 - 一个是白色的，另一个是蓝色但略小。然后我用css将蓝色复选标记定位在白色内部，以达到所需的效果。它可能需要一些摆弄，它可能不适用于所有用例，但它对我有用。

Answer 5

不幸的是，作为大纲提供的图标在名称中还有一个-o，例如：fa-arrow-circle-o-left - 停止图标没有该选项。

你可以使用fa-square-o：http://fortawesome.github.io/Font-Awesome/icon/square-o/来实现你所需要的 - 但它并不是特定的停止图标，只是概述了。

有没有办法我可以改变字体真棒符号只显示轮廓？

5 个答案: