Detailed explanation of CSS icon properties: content and font-icon

Detailed explanation of CSS icon properties: content and font-icon

In front-end development, icons are often used to enhance the readability and interactivity of web pages. In CSS, there are two common ways to display icons: using the content attribute and font-icon (font icon). This article details both methods and provides specific code examples.

1. Content attribute

The content attribute is an important attribute in CSS. It is mainly used to insert content before and after elements. In icon display, you can set the content attribute to reference specific Unicode characters or other elements to achieve the display of the icon.

1. Using Unicode characters

Unicode is a globally unified character encoding standard that contains a large number of special symbols and icons. By using Unicode characters in the content attribute, we can easily display icons in web pages.

For example, if we want to add an upward arrow icon to a button, we can write CSS code like this:

.btn::before {
  content: "91";
}

In the above code, the ::before pseudo-element means inserting before the button content content, and 91 is the Unicode encoding for an upward arrow. This will automatically display an upward arrow icon in front of the button.

2. Using pseudo-elements

In addition to using Unicode characters, we can also combine pseudo-elements to display icons. By setting the content attribute and style on a pseudo-element, you can display an icon at a specific location on the element.

For example, if we want to add a small icon in front of a link in a navigation bar, we can write the CSS code like this:

.nav-link::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("icon.png");
  background-size: cover;
}

In the above code, the ::before pseudo-element means that it is inserted before the link content. Content, by setting the empty content attribute, and setting the width, height, and background image styles, you can display a small icon in front of the link.

2. font-icon (font icon)

Font icon is a special font file in which each character is a vector icon. By setting the font attribute of the element, a specific font icon can be displayed.

1. Introducing the icon library

Before using font icons, you first need to introduce the corresponding icon library. Common font icon libraries include FontAwesome, Iconfont, etc. Font icons can be used by including the font file and the corresponding CSS file in the web page.

For example, if we use the FontAwesome icon library in a web page, we can follow the steps below:

1) Introduce the font-awesome.min.css file into HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-M18tXYzw1Fqk0BiGJ3jyzNN4MFI8hgmAW27ozEoH847nMwccLkG0arELWC3l6DuhltShMYvdu1e3no/7I6NHQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2) Use the corresponding HTML element and class name to display the icon

<i class="fas fa-arrow-up"></i>

In the above code, the <i> element represents the icon, and the class name fas represents the font icon , the class name fa-arrow-up represents the specific icon name. In this way, we can display an icon with an upward arrow in the web page.

2. Adjust icon style

Once the font icon library is introduced, we can adjust the display of the icon by setting the class name and style of the element.

For example, if we want to adjust the size, color and rotation angle of the icon, we can set the corresponding CSS style:

.icon {
  font-size: 20px;
  color: red;
  transform: rotate(45deg);
}

In the above code, .icon is a class name. By changing the class The name is applied to the element, giving it a font size of 20px, a red color, and a clockwise rotation of 45 degrees.

Summary:

The content attribute and font-icon (font icon) are two common methods for displaying web page icons. By setting the content attribute, you can directly display Unicode characters or other elements as icons; and by introducing a font icon library, you can display specific font icons through class names and styles. Developers can choose the appropriate method to achieve the display effect of icons based on specific needs.

The above is the detailed content of Detailed explanation of CSS icon properties: content and font-icon. For more information, please follow other related articles on the PHP Chinese website!