CSS Icons with examples

CSS Icons

Icons can easily be added to our HTML page, by using an icon library.

How To Add Icons

The simplest way to add an icon to your HTML page is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like or ).
CSS icons are symbols or graphical representations that are created using
CSS (Cascading Style Sheets) rather than traditional image formats like PNG or SVG.
They are often used in web design to add visual elements to a website without relying on image files.
There are a few common methods for creating CSS icons:

Font Icons:

These are icons created from special icon fonts such as Font Awesome, Material Icons, or Ion icons. These fonts contain a set of glyphs (symbols) that can be styled with CSS.

For example

you might use a class like .fa-heart to add a heart icon to your HTML, and then style it with CSS properties.

CSS Shapes:

Icons can be created using pure CSS by styling HTML elements (like

, , etc.) with CSS properties such as border, border-radius, background, and transform. This method is often used for simple geometric shapes or custom designs.
CSS icons offer several advantages, including scalability, ease of customization, and potentially smaller file sizes compared to images. They can be a versatile and efficient way to add visual elements to your web design.

Font Awesome

Include Font Awesome in your project:
Add this line to the of your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Use an icon

To use an icon, add a or element with the appropriate classes:

<i class="fas fa-camera"></i>

Material Icons

Include Material Icons in your project:
Add this line to the

of your HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Use an icon

To use an icon, add a element with the class material-icons and the icon name:

<i class="material-icons">camera_alt</i>

2. Using CSS for Custom Icons

You can also create your own icons with CSS. Here’s a simple example using pure CSS:

Create a basic HTML structure

<div class="icon-star"></div>

Add CSS to style your icon

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

This CSS snippet creates a simple star shape using borders and positioning.

3. SVG Icons

You can also use SVGs for high-quality icons:

Inline SVG

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7z"/>
</svg>

Using SVG as a background image

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;base64,...') no-repeat center center;
    background-size: contain;
}

Tips

Size and Color: For font icons and inline SVGs, you can adjust the size with font-size or the width and height properties, and change the color with color or fill for SVGs.
Accessibility: Always consider accessibility by adding descriptive text or aria attributes where needed.
Feel free to experiment and mix different methods to find what works best for your project!

The above is the detailed content of CSS Icons with examples. For more information, please follow other related articles on the PHP Chinese website!

css html for include using class this border background transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn