使字体令人敬畏的图标在一个圆圈？
我在一些项目上使用字体awsome，但我有一些事情，我想用字体真棒图标，我可以很容易调用图标像这样
<i class="fa fa-lock"></i> 是否有可能所有的图标总是在边界的圆形，这样的事情我有一个图片
运用
i { background-color: white; border-radius: 50%; border: 1x solid grey; padding:10px; }
会做的效果，但问题是，图标总是更大的txt或旁边的元素，任何解决scheme？
i.fa { display: inline-block; border-radius: 60px; box-shadow: 0px 0px 2px #888; padding: 0.5em 0.6em; }
<link href="font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <i class="fa fa-wrench"></i>
随着字体真棒，你可以很容易地使用这样的堆叠图标：
<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-lock fa-stack-1x"></i> </span>
指字体真棒堆积的图标
更新： – 小提琴的堆叠图标
如果您使用ems进行测量，包括line-height ， font-size和border-radius ，使用text-align: center可以使事情变得非常稳定：
#info i { font-size: 1.6em; width: 1.6em; text-align: center; line-height: 1.6em; background: #666; color: #fff; border-radius: 0.8em; /* or 50% width & line-height */ }
你不需要CSS或HTML技巧。 Font Awesome已经为它build立了类 – fa-stack
<span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span>
//我们现在有一个圆圈内的脸部图标:)
你也可以做到这一点。 我想围绕我的icomoon图标添加一个圆圈。 这是代码。
span { font-size: 54px; border-radius: 50%; border: 10px solid rgb(205, 209, 215); padding: 30px; }
我来这里是为了同样的事情。 两个答案可以做这个工作，但没有说服我。 我做了一个更好的。
如果你想精确这是要走的路。
小提琴。 去玩 – > http://jsfiddle.net/atilkan/zxjcrhga/
这是HTML
<div class="sosial-links"> <a href="#"><i class="fa fa-facebook fa-lg"></i></a> <a href="#"><i class="fa fa-twitter fa-lg"></i></a> <a href="#"><i class="fa fa-google-plus fa-lg"></i></a> <a href="#"><i class="fa fa-pinterest fa-lg"></i></a> </div>
这是CSS
.sosial-links a{ display: block; float: left; width: 36px; height: 36px; border: 2px solid #909090; border-radius: 20px; margin-right: 7px; /*space between*/ } .sosial-links ai{ padding: 12px 11px; font-size: 20px; color: #909090; }
玩的开心
这是您不需要使用padding ，只需设置a的height和width ，然后让margin: 0 auto属性为margin: 0 auto的flex处理。
.social-links a{ text-align:center; float: left; width: 36px; height: 36px; border: 2px solid #909090; border-radius: 100%; margin-right: 7px; /*space between*/ display: flex; align-items: flex-start; transition: all 0.4s; -webkit-transition: all 0.4s; } .social-links ai{ font-size: 20px; align-self:center; color: #909090; transition: all 0.4s; -webkit-transition: all 0.4s; margin: 0 auto; } .social-links ai::before{ display:inline-block; text-decoration:none; } .social-links a:hover{ background: rgba(0,0,0,0.2); } .social-links a:hover i{ color:#fff; }
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="social-links"> <a href="#"><i class="fa fa-facebook fa-lg"></i></a> <a href="#"><i class="fa fa-twitter fa-lg"></i></a> <a href="#"><i class="fa fa-google-plus fa-lg"></i></a> <a href="#"><i class="fa fa-pinterest fa-lg"></i></a> </div>
下面的例子对我来说不是很有用，这是我做的工作版本！
HTML：
<div class="social-links"> <a href="#"><i class="fa fa-facebook fa-lg"></i></a> <a href="#"><i class="fa fa-twitter fa-lg"></i></a> <a href="#"><i class="fa fa-google-plus fa-lg"></i></a> <a href="#"><i class="fa fa-pinterest fa-lg"></i></a> </div>
CSS：
.social-links { text-align:center; } .social-links a{ display: inline-block; width:50px; height: 50px; border: 2px solid #909090; border-radius: 50px; margin-right: 15px; } .social-links ai{ padding: 18px 11px; font-size: 20px; color: #909090; }
尝试这个
HTML：
<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>
CSS：
i { width: 30px; height: 30px; } .icon-2x-circle { text-align: center; padding: 3px; display: inline-block; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0px 0px 2px #888; -webkit-box-shadow: 0px 0px 2px #888; box-shadow: 0px 0px 2px #888; }
奇怪的是之前没有人提出这个build议。我总是用表来做到这一点。
简单地做一个包装display: table和中心的东西里面的text-align: center水平和vertical-align: middle垂直alignmentvertical-align: middle 。
<div class='wrapper'> <i class='icon fa fa-bars'></i> </div>
和这样的一些sass
.wrapper{ display: table; i{ display: table-cell; vertical-align: middle; text-align: center; } }
或看到这个JS小提琴
字体真棒图标插入为：之前。 因此，你可以风格你或我的 一个像这样：
.i { background: #fff; border-radius: 50%; display: inline-block; height: 20px; width: 20px; } <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
