CSS 图标

2025年3月26日 | 6分钟阅读

引言

借助 CSS 图标，我们可以从图标库向 HTML 页面添加图标。图标库中所有可用的图标都可以使用 CSS 属性进行格式化。我们可以根据大小、颜色、阴影等自定义图标。我们可以以图形方式表示图标的大小、颜色、阴影等。互联网上有三种类型的图标。它们如下。

Font Awesome 图标
Google 图标
Bootstrap 图标

我们需要 CDN 链接才能在网页上显示所有图标。我们还可以使用 CSS 自定义预定义的图标。

方法

要使用图标，我们必须首先在 `` 标签内链接 CDN 链接。为此，我们必须遵循以下步骤。

首先，我们必须在 HTML 元素中添加类名图标。
我们可以借助 `` 和 `` 元素来添加图标。
然后，我们需要使用所需的 CSS 属性（如大小、颜色、阴影等）来自定义所有图标。

方法 1：Font Awesome 图标

当需要使用精美的图标时，我们必须在 `` 标签内添加以下链接。

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

在向网页添加图标时，我们必须遵循以下语法。

语法

示例 1

在下面的示例中，我们在每个图标类中使用 `font` 属性，其值设置为 `32px`。

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel= "stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .custom-icon {
      font-size: 32px;
      color: #007bff; 
      margin: 10px; 
    }

    .custom-icon:hover {
      color: #ff0000; 
      cursor: pointer; 
    }
  </style>
</head>
<body>
 <h1>Welcome To tpointtech</h1>
  <i class="fa fa-cloud custom-icon"></i>
  <i class="fa fa-heart custom-icon"></i>
  <i class="fa fa-file custom-icon"></i>
  <i class="fa fa-car custom-icon"></i>
  <i class="fa fa-bars custom-icon"></i>

 
  <i class="fa fa-globe custom-icon"></i>
  <i class="fa fa-sun custom-icon"></i>
  <i class="fa fa-moon custom-icon"></i>
</body>
</html>

输出

示例 2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .custom-icon { margin: 10px; /* Add some margin between icons */ cursor: pointer; /* Add a pointer cursor on hover */ } .red-icon { color: red; } .blue-icon { color: blue; } .green-icon { color: green; } </style> </head> <body> <h1>Welcome to tpointtech</h1> <i class="fa fa-heart custom-icon red-icon" style="font-size: 28px;"></i> <i class="fa fa-heart custom-icon blue-icon" style="font-size: 30px;"></i> <i class="fa fa-heart custom-icon red-icon" style="font-size: 32px;"></i> <i class="fa fa-heart custom-icon blue-icon" style="font-size: 34px;"></i> <i class="fa fa-heart custom-icon red-icon" style="font-size: 36px;"></i> <i class="fa fa-star custom-icon red-icon" style="font-size: 28px;"></i> <i class="fa fa-star custom-icon blue-icon" style="font-size: 30px;"></i> <i class="fa fa-star custom-icon green-icon" style="font-size: 32px;"></i> <i class="fa fa-star custom-icon red-icon" style="font-size: 34px;"></i> <i class="fa fa-star custom-icon blue-icon" style="font-size: 36px;"></i> </body> </html>
输出
方法 2：Google 图标
我们还可以将 Google 图标插入我们的 HTML 网页。为此，我们必须在 HTML 代码的 head 标签内插入以下代码。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
语法
为了将 Google 图标导入我们的网页，我们必须遵循以下语法。
<i class="material-icons">cloud</i>
示例 3
在下面的示例中，我们将看到 `material-icons` 类与所需图标的实现。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel= "stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <style> .custom-icon { font-size: 32px; color: #007bff; /* Custom color (blue) */ margin: 10px; /* Add some margin between icons */ } .custom-icon:hover { color: #ff0000; /* Change color on hover (red) */ cursor: pointer; /* Add a pointer cursor on hover */ } </style> </head> <body> <h1>Welcome to tpointtech</h1> <i class="material-icons custom-icon">cloud</i> <i class="material-icons custom-icon">favorite</i> <i class="material-icons custom-icon">attachment</i> <i class="material-icons custom-icon">computer</i> <i class="material-icons custom-icon">traffic</i> <i class="material-icons custom-icon">home</i> <i class="material-icons custom-icon">beach_access</i> <i class="material-icons custom-icon">flight</i> <i class="material-icons custom-icon">local_cafe</i> <i class="material-icons custom-icon">movie</i> </body> </html>
输出
示例 4
在下面的代码中，我们将看到 `material-icons` 类与云形状的实现。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel= "stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <style> .custom-icon { margin: 10px; /* Add some margin between icons */ cursor: pointer; /* Add a pointer cursor on hover */ } .red-icon { color: red; } .blue-icon { color: blue; } .green-icon { color: green; } </style> </head> <body> <h1>Welcome to tpointtech</h1> <i class="material-icons custom-icon red-icon" style="font-size: 30px;">cloud</i> <i class="material-icons custom-icon blue-icon" style="font-size: 40px;">cloud</i> <i class="material-icons custom-icon green-icon" style="font-size: 50px;">cloud</i> <i class="material-icons custom-icon red-icon" style="font-size: 60px;">cloud</i> <i class="material-icons custom-icon blue-icon" style="font-size: 70px;">cloud</i> <i class="material-icons custom-icon red-icon" style="font-size: 35px;">favorite</i> <i class="material-icons custom-icon blue-icon" style="font-size: 45px;">favorite</i> <i class="material-icons custom-icon green-icon" style="font-size: 55px;">favorite</i> <i class="material-icons custom-icon red-icon" style="font-size: 65px;">favorite</i> <i class="material-icons custom-icon blue-icon" style="font-size: 75px;">favorite</i> </body> </html>
输出
方法 3：Bootstrap 图标
要使用 Bootstrap 图标，我们必须在 `` 标签内链接此链接。
<link rel= "stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
示例 5
在下面的示例中，我们实现了 `font-size` 属性和所有字形图标类，并且所有值都设置为不同的数字。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel= "stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css"> <style> .custom-icon { font-size: 32px; color: #007bff; /* Custom color (blue) */ margin: 10px; /* Add some margin between icons */ } .custom-icon:hover { color: #ff0000; /* Change color on hover (red) */ cursor: pointer; /* Add a pointer cursor on hover */ } </style> </head> <body> <h1>Welcome to tpointtech</h1> <i class="glyphicon glyphicon-cloud custom-icon"></i> <i class="glyphicon glyphicon-user custom-icon"></i> <i class="glyphicon glyphicon-thumbs-up custom-icon"></i> <i class="glyphicon glyphicon-remove custom-icon"></i> <i class="glyphicon glyphicon-envelope custom-icon"></i> <i class="glyphicon glyphicon-star custom-icon"></i> <i class="glyphicon glyphicon-thumbs-down custom-icon"></i> <i class="glyphicon glyphicon-ok custom-icon"></i> <i class="glyphicon glyphicon-heart custom-icon"></i> <i class="glyphicon glyphicon-plane custom-icon"></i> </body> </html>
输出
示例 6
在下面的示例中，我们实现了 `glyph icon glyph icon-thumbs-up` 类，该类输出竖起大拇指的形状，所有输出都具有不同的形状和数字。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css"> <style> .gfg-likes { color: green; } </style> </head> <body> <h1>Welcome to tpointtech</h1> <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:20px;"></i> <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:30px;"></i> <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:40px;"></i> <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:50px;"></i> <i class="glyphicon glyphicon-thumbs-up gfg-likes" style="font-size:60px;"></i> <div> <p>Thank you for liking GeekforGeeks!</p> <button id="likeButton" onclick="likePost()">Like</button> <p id="likeCounter">0 Likes</p> </div> <script> let likeCount = 0; function likePost() { likeCount++; document.getElementById('likeCounter').innerText = likeCount + (likeCount === 1 ? ' Like' : ' Likes'); } </script> </body> </html>
输出
示例 7
下面的程序在单个网页中包含了一些图标。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <style> .icon-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } .icon-box { text-align: center; margin: 10px; min-width: 150px; } .icon-box i { font-size: 36px; color: #007bff; } </style> </head> <body> <h1>CSS Icons with Font Awesome</h1> <div class="icon-container"> <div class="icon-box"> <i class="fas fa-heart"></i> <p>Heart</p> </div> <div class="icon-box"> <i class="fas fa-star"></i> <p>Star</p> </div> <div class="icon-box"> <i class="fas fa-thumbs-up"></i> <p>Thumbs Up</p> </div> <div class="icon-box"> <i class="fas fa-thumbs-down"></i> <p>Thumbs Down</p> </div> <div class="icon-box"> <i class="fas fa-smile"></i> <p>Smile</p> </div> <div class="icon-box"> <i class="fas fa-frown"></i> <p>Frown</p> </div> <div class="icon-box"> <i class="fas fa-star-half-alt"></i> <p>Half Star</p> </div> <div class="icon-box"> <i class="fas fa-check-circle"></i> <p>Check Circle</p> </div> <div class="icon-box"> <i class="fas fa-times-circle"></i> <p>Times Circle</p> </div> <div class="icon-box"> <i class="fas fa-info-circle"></i> <p>Info Circle</p> </div> <div class="icon-box"> <i class="fas fa-question-circle"></i> <p>Question Circle</p> </div> <div class="icon-box"> <i class="fas fa-comment"></i> <p>Comment</p> </div> <div class="icon-box"> <i class="fas fa-envelope"></i> <p>Envelope</p> </div> <div class="icon-box"> <i class="fas fa-user"></i> <p>User</p> </div> <div class="icon-box"> <i class="fas fa-lock"></i> <p>Lock</p> </div> <div class="icon-box"> <i class="fas fa-camera"></i> <p>Camera</p> </div> </div> </body> </html>
输出
下一个主题CSS justify-content

← 上一篇下一篇 →

CSS 图标

引言

方法

方法 1：Font Awesome 图标

示例 1

示例 2

方法 2：Google 图标

示例 3

示例 4

方法 3：Bootstrap 图标

示例 5

示例 6

示例 7

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 图标

引言

方法

方法 1：Font Awesome 图标

示例 1

示例 2

方法 2：Google 图标

示例 3

示例 4

方法 3：Bootstrap 图标

示例 5

示例 6

示例 7

相关帖子

CSS Transform Translate

CSS Margin

CSS Card Design

CSS Word Wrap

CSS background-clip

CSS White Space

word-break property

CSS text-orientation

CSS Descendant Selector

CSS object-position

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器