CSS中的字体棒边框

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>

​

Answer 2

谢谢你，克鲁耶尔。下面是添加一个固定的带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;   
    }

结果

​

​

如果有人能就如何更好地做到这一点向我提出任何建议，我们将不胜感激。

谢谢

Answer 3

因为图标的高度和宽度不是相同的像素。你可以让边境线不清楚地绕圈。为此，您可以通过以下方式来管理：

1)如果图标的高度大于宽度，则向父元素的左侧和右侧提供更多的填充，反之亦然。2)由于不能将“高度和宽度”属性应用于字体图标，因此可以使父级高度和宽度相等，就像在上面的答案中所做的那样。