真棒字体5-图标放在圆圈内?
it1352
帮助1人
问题说明
我正在尝试在div元素上放置一些Font Awesome图标，使其看起来像一个包含图标的圆圈.每个圆圈内总共有三个图标，并且所有圆圈必须彼此相邻.但是，当我尝试执行此操作时，图标放置不正确，圆圈移到了不合适的位置.我不知道我在做什么错.
I'm trying to put some Font Awesome icons over a div element, making it look like a circle that contains the icons. There are in total three icons inside a circle each, and all the circle have to be next to each other. But when I try to do it the icons are not positioned correctly and the circles move out of place. I don't know what I'm doing wrong.
.python {
width: 200px;
height: 200px;
display: inline-block;
border-radius: 50%;
margin-left: 183px;
background-color: lightblue;
}
.fa-python{
font-size: 100px;
display: inline-block;
position: relative;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<div class="python">
<i class="fab fa-python"></i>
</div>正确答案
#1
Font Awesome已经允许了，您不需要自己做:
Font Awesome already allow this, you don't need to do it yourself:
.custom .fa-circle:before {
border-radius: 50%;
background: linear-gradient(red, blue);
color: transparent;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i style="color:lightblue"></i>
<i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
<i style="color:blue"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x custom">
<i ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>相关: https://fontawesome.com/how-to-use/on-the-web/style/stacking-icons
这篇好文章是转载于：学新通技术网
