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

谢谢 ckuijjer。下面是添加一个 fixed with 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 2

出于可访问性和 SEO 的考虑，您确实应该使用类。如果将字符代码直接放在标记中，屏幕 reader 将读出“&-#-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 3

因为图标的高度和宽度不是同一个像素。您可以使边框不清晰地环绕。为此，您可以通过以下方式进行管理：

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

CSS 中的真棒字体边框

Font Awesome Borders in CSS

html

css

twitter-bootstrap

font-awesome