CODEWITHSUNDEEP
htmlcssfont-awesome-5
Ornella Acerbi
Ornella Acerbi

Reputation: 49

Font Awesome - how to put an icon inside a circle?

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>

Upvotes: 4

Views: 7172

Answers (2)

Temani Afif
Temani Afif

Reputation: 272667

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 class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
    <i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x custom">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Related: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

Same code works for the V6 as well:

.custom .fa-circle:before {
  border-radius: 50%;
  background: linear-gradient(red, blue);
  color: transparent;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.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 class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
    <i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x custom">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Upvotes: 4

Adrian C
Adrian C

Reputation: 21

I think is easier to just use flex

.python {
    width: 200px;
    height: 200px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center; 
}

or grid

{
    display: grid;
    place-content: center; 
}

Upvotes: 0

Related Questions