Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to put the text inside of a created icon?
Sometimes, developers require to put text inside icons. For example, adding the total number of likes inside the 'like' icon makes UI better, adding a comment count inside the comment icon, showing a particular number in any icon, etc.
In HTML, we can add the text and icon both separately. After that, we can set the position of the text to place them in the middle of the icon. In this tutorial, we will learn different examples of putting text inside a created icon.
Syntax
.text {
position: absolute;
text-align: center;
width: value;
padding-top: value;
}
In the above syntax, the 'absolute' position changes the position of the text based on the parent element's position. Also, we need to specify the width of the text according to the icon's width and padding-top to put text in the middle of the icon.
Example 1: Using the Ionic Framework for Icons
In the example below, we use the ionic framework to show icons on the web page. Here, we add a heart icon and numeric text. In CSS, we set the icon's font size and the 'absolute' position for the text. We also set the text width and padding-top to settle text in the middle
<!DOCTYPE html>
<html>
<head>
<style>
.icon-container {
position: relative;
display: inline-block;
}
.text {
font-size: 1.5rem;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-weight: bold;
}
</style>
<link href="https://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet" />
</head>
<body>
<h3>Placing the <i>text inside the icon</i> using CSS</h3>
<div class="icon-container">
<i style="font-size: 8rem; color: red;" class="ion-ios-heart-outline"></i>
<span class="text">LOVE</span>
</div>
</body>
</html>
A large red heart outline icon appears with the text "LOVE" centered inside it in bold red letters.
Example 2: Using the Font Awesome Library
In the example below, we use the font-awesome library to add icons on the web page. The font-awesome library provides built-in stacking classes that make it easy to place text inside icons
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style>
.icon-examples {
margin: 20px 0;
}
.fa-stack {
margin-right: 20px;
}
</style>
</head>
<body>
<h2>Placing the <i>text inside the icon</i> using CSS</h2>
<div class="icon-examples">
<span class="fa-stack fa-3x">
<i class="fa fa-comment fa-stack-2x" style="color: #007bff;"></i>
<strong class="fa-stack-1x fa-stack-text fa-inverse">87</strong>
</span>
<span class="fa-stack fa-3x">
<i class="fa fa-certificate fa-stack-2x" style="color: #28a745;"></i>
<span class="fa fa-stack-1x fa-inverse">3</span>
</span>
</div>
</body>
</html>
A blue comment bubble icon with "87" in white text centered inside, and a green certificate icon with "3" in white text centered inside appear on the page.
Example 3: Creating Custom Icon with Text
You can also create custom icons using CSS and place text inside them
<!DOCTYPE html>
<html>
<head>
<style>
.custom-icon {
position: relative;
width: 80px;
height: 80px;
background-color: #ff6b6b;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.icon-text {
color: white;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Custom Icon with Text</h3>
<div class="custom-icon">
<span class="icon-text">5</span>
</div>
<div class="custom-icon" style="background-color: #4ecdc4;">
<span class="icon-text">?</span>
</div>
</body>
</html>
A red circular icon with "5" in white text and a teal circular icon with a white star symbol appear on the page.
Conclusion
We can add text inside icons using CSS positioning techniques or built-in library classes. The key is using relative positioning for the container and absolute positioning for the text, or leveraging flexbox for perfect centering.
939 Views
