html - CSS 中的 Font Awesome 边框

Question

我正在重新设计我的网站。也许有人可以很好地阐明我遇到的问题。

下面是我正在尝试做的事情的模型。我正在使用很棒的字体来创建图标，并想在每个图标周围加上边框。

我已将模型翻译成以下 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;
    }   

使用这段代码，我得到了以下结果；

我没有使用很棒的字体类，因为我在使用该方法指定大小时遇到​​问题。也许我应该在类里面这样做？

如果有人现在可以给我一个想法，以便在模型上最好地实现这些图标，我将不胜感激。

Answer 1

出于可访问性原因和 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>