How can I place text inside the created icon?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How can I place text inside the created icon?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 pm 10:21 PM

How can I place text inside the created icon?

Sometimes, developers need to put text into icons. For example, adding the total number of likes inside the Like icon can make the UI better, adding comments inside the Comment icon, showing a specific number in any icon, etc.

In HTML, we can add text and icons separately. After that, we can set the position of the text, placing them in the middle of the icon. In this tutorial we will learn different examples of placing text inside the created icon.

grammar

Users can set the position of the text according to the following syntax and put it into the created icon.

text {
   position: absolute;
   text-align: center;
   width: value;
   padding-top: value;
}

In the above syntax, "absolute" position changes the position of the text based on the position of the parent element. Additionally, we need to specify the width of the text based on the width of the icon and padding-top to place the text in the middle of the icon.

Example 1 (Ionic framework using icons)

In the example below, we use the ionic framework to display icons on a web page. Here we have added a heart icon to the web page. Additionally, we have added digital text. In CSS, we set the font size and "absolute" position of the icon. Additionally, we set the text width and top padding to position the text in the middle.

In the output, the user 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 id="Placing-the-i-text-inside-the-icon-i-using-CSS"> 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 Font-awesome library)

In the example below, we use the font-awesome library to add icons to the web page. The font-awesome library contains some predefined icons with text that we can change.

Here, we use the span element to add icons. Additionally, we use different class names with icon and text elements, placing the text element in the middle of the icon.

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 id="Placing-the-i-text-inside-the-icon-i-using-CSS"> 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 about adding text within icons using CSS. We need to set the position of the text based on the parent element and adjust the padding or margins. Additionally, users can create custom icons using CSS and try placing text within them instead of using pre-built SVG icons.

The above is the detailed content of How can I place text inside the created icon?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Simulating Mouse MovementApr 22, 2025 am 11:45 AM

If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides

Powering Search With Astro Actions and Fuse.jsApr 22, 2025 am 11:41 AM

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” th

Undefined: The Third Boolean ValueApr 22, 2025 am 11:38 AM

I wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a

In Defense of the Ternary StatementApr 22, 2025 am 11:25 AM

Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I

Using the Web Speech API for Multilingual TranslationsApr 22, 2025 am 11:23 AM

Since the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making

Jetpack Gutenberg BlocksApr 22, 2025 am 11:20 AM

I remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us

Creating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AM

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there

Using 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AM

Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this

See all articles