Question

我添加了方形的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;
}

我需要显示没有边框半径的方形，我为类border-radius:0;添加.fa-square但是如果没有边框半径，字体很棒。

我该如何解决这个问题？

DEMO JSFIDDLE

Answer 1

正如其他人提到的那样，＆＃34; square＆＃34;图标后面实际上是一个应用于.fa-square的字体图标：在css之前。

不幸的是，此时设置的Font Awesome不包含真正的方块。

然而，他们的阵容中确实有一个带有更硬角的图标，称为＆＃34;停止＆＃34;图标（在视频播放器图标组中）。您可以将其替换为＆＃34; square＆＃34;在你的CSS中通过这样做获得更好的方形堆栈。它确实形成了一个非常小的半径角，但是在小尺寸下它很难说明：

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

＆＃34; \ F04D＆＃34;是Font Awesome中停止图标的CSS内容值。

Fontawesome图标的CSS内容值列表

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

<强>结果

Image of results

干杯！

Answer 2

fa-square：在{content：＆＃34; \ f0c8＆＃34;}之前会导致问题。您可以通过删除该类来修复它。然后覆盖每个fa-stack-1x图标的border-radius。

enter image description here

<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;
}

对于正方形，只需将border-radius更改为0px;在上面的CSS

Answer 3

我查看了font-awesome.min.css并找到了这一行：fa-square:before{content:"\f0c8"}我相信这意味着您正在使用\f0c8绘制正方形。这意味着它是一个来自真棒字体的角色，你不能通过border-radius来改变它你可以在这里阅读这个图标 http://www.utf8icons.com/character/61640/UTF-8-character

border radius不适用于字体中的fa-stack真棒

3 个答案: