Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to put the text inside of a created icon?
Sometimes, developers require to put the text in the icons. For example, adding the total number of likes inside the ‘like’ icon makes UI better, adding a comment 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 the text inside a created icon.
Syntax
Users can follow the syntax below to set the position of the text to put it inside a created icon.
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 used the ionic framework to show the icons on the web page. Here, we added the icon of the heart on the web page. Also, we added the numeric text. In CSS, we set the icon's font size and the ‘absolute’ position. Also, we set the text width and padding top on to settle text in the middle.
In the output, users can observe the text in the middle of the heart icon.
<html>
<head>
<style>
.text {
font-size: 2rem;
position: absolute;
text-align: center;
width: 8rem;
padding-top: 4rem;
}
</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>
<span>
<span class = "text"> LOVE </span>
<i style = "font-size: 10rem;" class = "ion-ios-heart-outline"> </i>
</span>
</div>
</body>
</html>
Example 2 (Using the Font-awesome library)
In the example below, we used the font-awesome library to add icons on the web page. The font-awesome library contains some pre-defined icons containing the text which we can change.
Here, we used the span element to add icons. Also, we used the different class names with icons and text elements to put text elements in the middle of the icons.
In the output, we can see the text inside the icon.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>
<body>
<h2> Placing the <i> text inside the icon </i> using CSS</h2>
<div>
<span class = "fa-stack fa-3x">
<i class = "fa fa-comment fa-stack-2x"> </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"> </i>
<span class = "fa fa-stack-1x fa-inverse"> 3 </span>
</span>
</div>
</body>
</html>
We learned to add text inside the icon using CSS. We need to set the position of the text based on the parent element and adjust the padding or margin. Also, users can create custom icons using CSS and try to place the text inside that rather than using the pre-built SVG icons.
317 Views
