css settings icon-Front-end Q&A-php.cn

css settings icon

WBOY

Release： 2023-05-21 10:50:37

Original

1383 people have browsed it

With the increasing development of web technology, CSS, as an important part of front-end development, has become more and more powerful. CSS can not only control page layout, style and animation effects, but also set icons to bring better visual effects to the page. This article will introduce how to use CSS to set icons and add something beautiful to the web page.

1. Using font icons

Font icons are made by converting icons into fonts and can be called through CSS. The advantage of font icons is that the size, color, and style of the icon can be easily changed, which is more difficult with picture icons.

Using font icons is very simple. You only need to set the relevant font type and Unicode value in CSS to call it. The following is an example of using the font-awesome library:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用字体图标</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-gnxSqbKCXUh497Mg0RpjJGw0C8yJjM0pS7oBneUpv9HNjM9z+Ulq6T03I5YQepIv" crossorigin="anonymous">
    <style>
        .icon {
            font-size: 24px;
            color: red;
        }
    </style>
</head>
<body>
    <i class="fas fa-heart icon"></i>
</body>
</html>

Copy after login

By introducing the font-awesome library, call the .icon class in CSS, using <i> The label displays a heart icon and sets its size to 24px and its color to red. At this time, a red heart icon will be displayed on the page.

2. Use SVG icons

SVG icon is a vector graphic based on XML. Unlike font icons, SVG icons are called by being embedded in HTML or CSS code. One benefit of using SVG icons is that they can be fully scaled without losing clarity because they are vectors rather than pixels.

You can use SVG icons through the following steps:

1. Embed SVG code in HTML.

<svg viewBox="0 0 24 24">
    <path d="M12 2c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zM12 18.5c-3.6 0-6.5-2.9-6.5-6.5s2.9-6.5 6.5-6.5 6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5z"></path>
</svg>

Copy after login

2. Set the color and size of SVG in CSS.

.icon {
    fill: red;
    width: 32px;
    height: 32px;
}

Copy after login

Set the fill attribute of the .icon class to red in CSS and set its size to 32px x 32px to display a red on the page SVG icon.

3. Use CSS background icons

In addition to font icons and SVG icons, CSS background icons are also a common icon method. CSS background icons usually use the background-image property and use CSS sprite technology to merge multiple icons into one image file.

The following is an example of using CSS background icons:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用CSS背景图标</title>
    <style>
        .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url('icons.png') no-repeat;
        }
        .icon-facebook {
            background-position: 0 0;
        }
        .icon-twitter {
            background-position: -24px 0;
        }
        .icon-github {
            background-position: -48px 0;
        }
    </style>
</head>
<body>
    <div class="icon icon-facebook"></div>
    <div class="icon icon-twitter"></div>
    <div class="icon icon-github"></div>
</body>
</html>

Copy after login

In the above example, an image file named icons.png is used, which combines three icons combined into one image. In CSS, the .icon class is used to set the size and background of the icon, while the .icon-{name} class is used to set different icon positions. For example, the .icon-facebook class sets the image position to 0px, and other classes are as follows.

One benefit of CSS background icons is that the icon can be scaled and tiled to fit devices of different sizes and resolutions.

Summary

In this article, we introduced how to use CSS to set font icons, SVG icons and CSS background icons. These icon technologies have their own advantages, disadvantages and characteristics, and you can choose the technology that best suits you according to your needs. If you want to add some beautiful elements and enhance the user experience, icons are one of the good choices.

The above is the detailed content of css settings icon. For more information, please follow other related articles on the PHP Chinese website!