blocks|key|151450|text|有了Font+Awesome，你可以很容易地使用堆叠的图标，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151451|<span+class="fa-stack+fa-2x">
++<i+class="fas+fa-circle-thin+fa-stack-2x">
++<i+class="fas+fa-lock+fa-stack-1x+fa-inverse">
|code-block|syntax|javascript|151452|参考Font+Awesome+Stacked+Icons|offset|length|151453|更新：-针对stacked+icons的小提琴|151454|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons|1|http://jsfiddle.net/sampatbadhe/ocftsLfe/^0|0|0|2|Q|0|0|6|D|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

With Font Awesome you can easily use stacked icons like this:

<pre><code>&lt;span class="fa-stack fa-2x"&gt;
 &lt;i class="fas fa-circle-thin fa-stack-2x"&gt;&lt;/i&gt;
 &lt;i class="fas fa-lock fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
&lt;/span&gt;
</code></pre>

refer <a href="https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons" rel="noreferrer">Font Awesome Stacked Icons</a>

Update:- 
Fiddle for <a href="http://jsfiddle.net/sampatbadhe/ocftsLfe/" rel="noreferrer">stacked icons</a>

blocks|key|151472|text|使用em作为基准度量的圆圈中的字体图标|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|151473|如果你使用ems进行测量，包括line-height，font-size和border-radius，使用text-align:+center会让事情变得非常可靠：|151474|#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%25+width+&+line-height+*/
}|code-block|syntax|javascript|151475|entityMap^0|2|2|0|F|B|R|9|11|D|1H|I|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

<h2>Font icon in a circle using <code>em</code> as the base measurement</h2>

if you use ems for the measurements, including <code>line-height</code>, <code>font-size</code> and <code>border-radius</code>, with <code>text-align: center</code> it makes things pretty solid:

<pre><code>#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 &amp; line-height */
}
</code></pre>

blocks|key|4657711|text|您也可以这样做。我想在我的图标周围添加一个圆圈。下面是代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4657712|span+{
font-size:+54px;
border-radius:+50%25;
border:+10px+solid+rgb(205,+209,+215);
padding:+30px;
}|code-block|syntax|javascript|4657713|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also do this. I wanted to add a circle around my icomoon icons. Here is the code. 

<pre><code>span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}
</code></pre>

blocks|key|151535|text|这是一种不需要使用padding的方法，只需为a设置height和width，让flex处理margin:+0+auto即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|151536|​|151537|.social-links+a{
++text-align:center;
	float:+left;
	width:+36px;
	height:+36px;
	border:+2px+solid+#909090;
	border-radius:+100%25;
	margin-right:+7px;+/*space+between*/
++++display:+flex;
++++align-items:+flex-start;
++++transition:+all+0.4s;
++++-webkit-transition:+all+0.4s;
}+
.social-links+a+i{
	font-size:+20px;
++++align-self:center;
	color:+#909090;
++++transition:+all+0.4s;
++++-webkit-transition:+all+0.4s;
++++margin:+0+auto;
}
.social-links+a+i::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;
}|code-block|syntax|javascript|151538|<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"></a>
++++<a+href="#"><i+class="fa+fa-twitter+fa-lg"></a>
++++<a+href="#"><i+class="fa+fa-google-plus+fa-lg"></a>
++++<a+href="#"><i+class="fa+fa-pinterest+fa-lg"></a>
</div>|151539|151540|entityMap^0|9|7|N|1|Q|6|X|5|14|4|1A|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|Q|$]]

This is the approach you don't need to use <code>padding</code>, just set the <code>height</code> and <code>width</code> for the <code>a</code> and let the <code>flex</code> handle with <code>margin: 0 auto</code>.

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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 a i{
	font-size: 20px;
 align-self:center;
	color: #909090;
 transition: all 0.4s;
 -webkit-transition: all 0.4s;
 margin: 0 auto;
}
.social-links a i::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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/&gt;

&lt;div class="social-links"&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-facebook fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-twitter fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-google-plus fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-pinterest fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|151493|text|下面的例子对我来说不是很有效，这是我制作的版本！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151494|HTML：|151495|<div+class="social-links">
++++<a+href="#"><i+class="fa+fa-facebook+fa-lg"></a>
++++<a+href="#"><i+class="fa+fa-twitter+fa-lg"></a>
++++<a+href="#"><i+class="fa+fa-google-plus+fa-lg"></a>
++++<a+href="#"><i+class="fa+fa-pinterest+fa-lg"></a>
</div>|code-block|syntax|javascript|151496|CSS：|151497|.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+a+i{
++++padding:+18px+11px;
++++font-size:+20px;
++++color:+#909090;
}|151498|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The below example didnt quite work for me,this is the version that i made work!

HTML:

<pre><code>&lt;div class="social-links"&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-facebook fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-twitter fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-google-plus fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a href="#"&gt;&lt;i class="fa fa-pinterest fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

CSS:

<pre><code>.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 a i{
 padding: 18px 11px;
 font-size: 20px;
 color: #909090;
}
</code></pre>

blocks|key|4657827|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4657828|HTML：|4657829|<div+class="icon-2x-circle"><i+class="fa+fa-check+fa-2x"></div>|code-block|syntax|javascript|4657830|CSS：|4657831|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;
}|4657832|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

try this

HTML:

<pre><code>&lt;div class="icon-2x-circle"&gt;&lt;i class="fa fa-check fa-2x"&gt;&lt;/i&gt;&lt;/div&gt;
</code></pre>

CSS:

<pre><code>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;
}
</code></pre>

blocks|key|4657920|text|您可以使用以下代码简单地获取圆形图标：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4657921|<a+class="facebook-share-button+social-icons"+href="#"+target="_blank">
++++<i+class="fab+fa-facebook+socialicons">
</a>|code-block|syntax|javascript|4657922|现在，您的CSS将是：|4657923|.social-icons+{
display:+inline-block;border-radius:+25px;box-shadow:+0px+0px+2px+#888;
padding:+0.5em;
background:+#0D47A1;
font-size:+20px;
}
.socialicons{color:+white;}|4657924|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can simply get round icon using this code:

<pre><code>&lt;a class="facebook-share-button social-icons" href="#" target="_blank"&gt;
 &lt;i class="fab fa-facebook socialicons"&gt;&lt;/i&gt;
&lt;/a&gt;
</code></pre>

Now your CSS will be:

<pre><code>.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}
</code></pre>

blocks|key|151595|text|我喜欢Dave+Everitt用«line-height»的答案，但它只能通过指定«height»来工作，然后我们必须在line-height中添加«！重要»……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151596|.cercle+{
++++font-size:+2em;
++++width:+2em;
++++height:+2em;
++++text-align:+center;
++++line-height:+2em!important;
++++background:+#666;
++++color:+#fff;
++++border-radius:+2em;
}|code-block|syntax|javascript|151597|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I like Dave Everitt's answer with the « line-height » but it only works by specifying the « height » and then we have to add « !important » to line-height ...

<pre><code>.cercle {
 font-size: 2em;
 width: 2em;
 height: 2em;
 text-align: center;
 line-height: 2em!important;
 background: #666;
 color: #fff;
 border-radius: 2em;
}
</code></pre>

blocks|key|4657978|text|这是我到目前为止找到的最好、最精确的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4657979|CSS：|4657980|.social+.fa+{
++++++margin-right:+1rem;
++++++border:+2px+#fff+solid;
++++++border-radius:+50%25;
++++++height:+20px;
++++++width:+20px;
++++++line-height:+20px;
++++++text-align:+center;
++++++padding:+0.5rem;
++++}|code-block|syntax|javascript|4657981|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is the best and most precise solution I've found so far.

CSS:

<pre><code>.social .fa {
 margin-right: 1rem;
 border: 2px #fff solid;
 border-radius: 50%;
 height: 20px;
 width: 20px;
 line-height: 20px;
 text-align: center;
 padding: 0.5rem;
 }
</code></pre>

I am using font awesome on some project but I have some things that I want to do with font awesome icons, I can easily call an icon like this:
<pre><code>&lt;i class=&quot;fa fa-lock&quot;&gt;&lt;/i&gt;
</code></pre>
Is it possible to all icon always be in round circle with border? Something like this, I have a picture:
<img src="https://i.stack.imgur.com/m7xGh.jpg" alt="enter image description here" />
Using
<pre><code>i {
 background-color: white;
 border-radius: 50%;
 border: 1px solid grey;
 padding: 10px;
}
</code></pre>
Will do the effect, but the problem is that icons are always bigger that the text or element beside, any solutions?

Make Font Awesome icons in a circle?

我在一些项目中使用字体棒，但是我有一些我想用字体棒图标来做的事情，我可以很容易地调用一个这样的图标：有没有可能所有的图标都是带边框的圆圈？就像这样，我有一张照片：​​使用i { background-color: white; border-radius: 50%; border: 1px solid grey; padding: 10p

问在圆圈里做一个令人敬畏的字体图标？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在圆圈里做一个令人敬畏的字体图标？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在圆圈里做一个令人敬畏的字体图标？
EN