Question

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

下面是我正在尝试做的模拟。我正在使用字体很棒来创建图标，并希望在每个图标周围添加边框。

mockup

我已将模型转换为以下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;
    }

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

HTML

我没有使用字体真棒类，因为我在使用该方法指定大小时遇到问题。也许我应该在课堂上做这件事？

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

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

结果

Result

如果有人能给我任何关于如何做得更好的建议，我们将不胜感激。

由于

Answer 2

你真的应该使用这两个类的可访问性和SEO。如果您将字符代码直接放在标记中，屏幕阅读器会读出“＆amp; - ＃ - 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中的字体真棒边框

3 个答案: