The text inside the fa-icon
How do I add text inside an icon using the fa icon?
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<i class="fa fa-circle-o" aria-hidden="true">1</i>
How do I add the number 1 inside the badge?
+6
source to share
3 answers
Example
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<span class="fa-stack fa-1x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<span class="fa fa-stack-1x">1</span>
</span>
+7
source to share
body {
padding: 20px;
}
.calendar-stack {
position: relative;
display: inline-block;
width: (13em / 14);
height: 1em;
.icon-calendar-empty,
.calendar-day {
position: absolute;
}
.calendar-day {
top: (7em / 8);
left: (1em / 8);
width: (11em / 8);
height: (6em / 8);
font-family: sans-serif;
font-size: (8em / 14);
font-weight: 700;
line-height: (8em / 14);
text-align: center;
}
}
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div class="calendar-stack">
<i class="icon-calendar-empty"></i>
<span class="calendar-day">1</span>
</div>
<div class="calendar-stack icon-2x">
<i class="icon-calendar-empty"></i>
<span class="calendar-day">22</span>
</div>
<div class="calendar-stack icon-3x">
<i class="icon-calendar-empty"></i>
<span class="calendar-day">31</span>
</div>
<div class="calendar-stack icon-4x">
<i class="icon-calendar-empty"></i>
<span class="calendar-day">25</span>
</div>
<div class="calendar-stack icon-5x">
<i class="icon-calendar-empty"></i>
<span class="calendar-day">3</span>
</div>
I think http://jsfiddle.net/canuk/YzkWs/ will be helpful as well.
+2
source to share
First you have to add this script to your head:
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
then you can use icons like this:
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>
Then you should get these icons as a result:
0
source to share