边框半径不适用于字体真棒中的 fa-stack答案

【问题标题】：border radius not work for fa-stack in font awesome边框半径不适用于字体真棒中的 fa-stack
【发布时间】：2015-06-05 16:56:19
【问题描述】：

我用正方形添加了 fontawesome 图标，这对我有用：

HTML：

<ul class="list-inline">
    <li><a href="#">
        <span class="fa-stack fa-lg icon-facebook">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-facebook fa-stack-1x"></i>
        </span>
        </a></li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-twitter">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
    </a></li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-gplus">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-plus fa-stack-1x"></i>
        </span>
        </a></li>
</ul>

CSS：

.fa-stack-1x {
    color:white;
    border-radius:0;
}
.fa-square{
    border-radius:0;
}
.icon-facebook {
   color:#3b5998;
}

.icon-twitter {
    color:#00aced;
}

.icon-gplus{
    color:#dd4b39;
}

body {
    background-color: black;
}

我需要显示没有边框半径的正方形，并为 .fa-square 类添加 border-radius:0; 但字体真棒在没有边框半径的情况下不起作用。

我该如何解决这个问题？

演示JSFIDDLE

【问题讨论】：

它们在 JSFiddle 中看起来不错。你到底想做什么？
在行动中，我看到正方形的边界半径。我需要从正方形中删除边界半径。
那条评论不清楚，您能改写一下吗？
@OfirBaruch：请看这张图片i.stack.imgur.com/ClDlm.jpg。第二行没有边界半径，我需要这个。
@Mark：请看图片：i.stack.imgur.com/ClDlm.jpg

标签： html css font-awesome

【解决方案1】：

正如其他人提到的，图标后面的“正方形”实际上是应用于 .fa-square:before 的字体图标。

很遗憾，此时的 Font Awesome 集不包含真正的正方形。

但是，他们的集合中确实有一个图标，其角更硬，称为“停止”图标（在视频播放器图标组中）。你可以用它代替你的css中的“正方形”，通过这样做得到一个更好的正方形堆栈。它确实形成了一个非常小的半径角，但在小尺寸时几乎不会引起注意：

.fa-square:before {
  content: "\f04d";
}

"\f04d" 是 Font Awesome 中停止图标的 CSS 内容值。

Fontawesome 图标的 CSS 内容值列表

http://astronautweb.co/snippet/font-awesome/

结果

Image of results

干杯！

【讨论】：

【解决方案2】：

fa-square:before{content:"\f0c8"} 会导致问题。您可以通过删除该类来修复它。然后覆盖每个 fa-stack-1x 图标的边框半径。

<ul class="list-inline">
    <li><a href="#">
        <span class="fa-stack fa-lg icon-facebook">
          <i class="fa fa-facebook fa-stack-1x"></i>
        </span>
        </a>
    </li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-twitter">
          <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
    </a>
    </li>
    <li><a href="#">
        <span class="fa-stack fa-lg icon-gplus">
          <i class="fa fa-plus fa-stack-1x"></i>
        </span>
        </a>
    </li>
</ul>

CSS：

body {
    background-color: black;
}
.fa-stack-1x {
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    color:white;
}
.icon-facebook>.fa-stack-1x  {
    background-color:#3b5998;
}
.icon-twitter>.fa-stack-1x  {
    background-color:#00aced;
}
.icon-gplus>.fa-stack-1x {
    background-color:#dd4b39;
}

对于正方形，只需将边框半径更改为 0px；在上面的 CSS 中

【讨论】：

【解决方案3】：

我查看了 font-awesome.min.css 并找到了这一行：fa-square:before{content:"\f0c8"} 我相信这意味着您正在使用\f0c8 来绘制正方形。这意味着它是来自超赞字体的字符，您无法通过 border-radius 更改它。
您可以在以下位置阅读有关此图标的信息 http://www.utf8icons.com/character/61640/UTF-8-character

【讨论】：