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

How can I place text inside the created icon?

WBOY

Release： 2023-09-01 22:21:07

forward

1504 people have browsed it

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;
}

Copy after login

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> 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>

Copy after login

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> 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>

Copy after login

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!