CSS中的Font Awesome边框

Question

我正在对我的网站进行重新设计。也许有人能够帮助我解决一个问题。

下面是我想要做的事情的模拟。我正在使用font awesome创建图标，并希望在每个图标周围放置边框。

我已将模拟转换为以下HTML代码：

<div class="col-md-4">

        <p class="servicesFont borderSer">&#xf108;</p>

    </div>
    <div class="col-md-4">

        <p class="servicesFont borderSer">&#xf1ea;</p>

    </div>
    <div class="col-md-4">

        <p class="servicesFont borderSer">&#xf040;</p>

    </div>

和CSS

.servicesFont{
font-family: FontAwesome;
color: #3397d3;
font-size: 90px;
font-weight: 400;
display:inline-block;
}
.borderSer{
    border-radius: 50%;
    border-width: .25em;
    border-color: #885fa8;
    border-style: dashed;
    display:inline-block;
    }   

使用此代码，我得到以下结果;

我没有使用字体awesome类，因为我在使用该方法指定大小时遇到了问题。也许我应该用类来做呢？

如果有人能给我一个关于如何最好地在模拟中实现这些图标的想法，我将非常感激。

- Ciaran

---

每个图标的宽度都不同，尝试使用固定宽度的span元素将其包围，并应用border和text-align:center属性。 - ckuijjer

谢谢，那个方法非常有效。我会在下面发布我的结果。 - Ciaran

Answer 1

感谢 ckuijjer。下面是添加固定宽度的 span 元素后的结果。

HTML

   <span class="width borderSer">
                <p class="servicesFont ">&#xf108;</p>
                </span>

CSS

.servicesFont{
    font-family: FontAwesome;
    color: #3397d3;
    font-size: 90px;
    font-weight: 400;
    display:inline-block;
    padding:20px;
    }
.borderSer{
    border-radius: 50%;
    border-width: 25px;
    border-color: #885fa8;
    border-style: dashed;
    display:inline-block;
    text-align:center;
    }   
.width{
width:200px;
height:200px;   
    }

结果

如果有人能给我关于如何更好地完成这个任务的建议，那将不胜感激。

谢谢

- Ciaran

Answer 2

为了更好的可访问性和SEO，您应该使用类。如果您直接将字符代码放在标记中，屏幕阅读器将读出“&-#-x-f-1-0-8-;”，这显然会对视力障碍者造成困惑和无意义的内容。此外，您将字符代码放在标记中并将其包装在p标签中，因此您正在告诉搜索引擎这些代码是内容。

以下是正确使用类的一种方法:

.services {
  padding-top: 2em;
  padding-bottom: 2em;
}
.services i, .services h4 {
  text-align: center;
}
.fa.services-icon {
  color: #3397d3;
  height: 180px;
  width: 180px;
  font-size: 90px;
  line-height: 180px;
  margin: auto;
  display: block;
}
.services-icon:after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  border-width: .25em;
  border-color: #885fa8;
  border-style: dashed;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="row services">
    <div class="col-sm-4">
      <i class="fa fa-desktop services-icon"></i>
      <h4>Web</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a nisi ac neque interdum pharetra sit amet in tortor. Curabitur sit amet nisi non felis sodales placerat non quis urna. Proin eget metus dui. Vestibulum finibus justo vel erat volutpat bibendum. Donec pretium tortor eget dui efficitur, in dapibus lorem lobortis.</p>
    </div>
    <div class="col-sm-4">
      <i class="fa fa-newspaper-o services-icon"></i>
      <h4>Print</h4>
      <p>Curabitur aliquet lacus nec leo iaculis, in luctus velit finibus. Donec pharetra rutrum orci malesuada dapibus. Vivamus sit amet bibendum lectus. Nulla sagittis dolor quis odio suscipit, sed euismod lorem euismod. Donec dapibus vitae libero faucibus bibendum. Duis aliquet nisi a ligula hendrerit, a ullamcorper tellus tincidunt.</p>
    </div>
    <div class="col-sm-4">
      <i class="fa fa-pencil services-icon"></i>
      <h4>Branding</h4>
      <p>Nam tempus luctus laoreet. Cras at massa sapien. Vivamus eu rhoncus sapien, ac molestie urna. Suspendisse malesuada ligula vitae augue sodales finibus. Vestibulum porttitor sed elit ac vestibulum. In feugiat ipsum sed elit consequat, id vehicula odio pellentesque. Proin sit amet dictum velit. Etiam sit amet lorem quis leo laoreet pellentesque.</p>
    </div>
  </div>
</div>

- jme11

Answer 3

由于图标的高度和宽度不是相同的像素，因此您可能无法清晰地将边框圆形化。为此，您可以通过以下方式进行管理：

1）如果您的图标高度大于宽度或宽度大于高度，则可以给父元素的左右两侧添加更多填充。 2）由于无法将高度和宽度属性应用于字体图标，因此可以像上面的答案一样使父元素的高度和宽度相等。

- user254153