CSS图标

在本文中，我们将了解如何使用 CSS图标 从图标库添加到HTML页面。库中的所有图标都可以使用CSS格式化。它们可以根据大小、颜色、阴影等进行定制。图标是一种图形表示，它传达了其用途的特定含义，并有助于相应地导航。

有三种类型的图标库可用，即

• 字体很棒的图标
• 谷歌图标
• 引导图标

我们将从可用的图标库中包含所需的CDN链接，这将帮助我们使用预定义的图标类，或者我们可以使用CSS对其进行定制。

方法： 为了使用图标，我们需要在

部分中添加所需的CDN链接。要在HTML中添加预定义类，请执行以下步骤：

• 将图标类的名称添加到任何内联HTML元素中。
• 和 元素被广泛用于添加图标。
• 所有CSS图标都是可伸缩的矢量图标，可以使用所需的CSS属性（如大小、颜色、阴影等）进行自定义。

注： 上述所有库都不需要下载或安装。

方法1：字体图标

要使用令人敬畏的字体图标，请在

部分中添加以下链接。

<link rel="stylesheet"  href="https://www.yiteyi.com/?golink=aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvZm9udC1hd2Vzb21lLzQuNy4wL2Nzcy9mb250LWF3ZXNvbWUubWluLmNzcw==" >

语法：

<i class="fa fa-cloud"></i>

我们可以使用 字体大小 属性使其成为用于显示的大尺寸图标。下面的示例说明了 字体大小 所有物

例1： 在本例中，我们使用了 字体大小 属性，其值设置为32px。

输出：

例2： 在本例中，我们使用了“ 发发心 “拥有 字体大小 属性和颜色属性，其值分别设置为28px和红色、蓝色。

输出：

方法2：谷歌图标

要使用谷歌图标，请在

部分添加以下链接。

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

语法：

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

请参阅 如何在使用HTML和CSS的网页中使用Google material图标作为列表样式？ 文章介绍了如何在预定义类中使用CSS属性。

例1： 在本例中，我们使用了“ 材质图标 “使用所需图标初始化。

输出：

例2： 在本例中，我们使用了“ 材质图标 “用云的形状上课。

输出：

方法3：引导图标

要使用引导图标，请在

部分中添加以下链接。

<link rel="stylesheet"  href="https://www.yiteyi.com/?golink=aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvY3NzL2Jvb3RzdHJhcC5taW4uY3Nz" >

语法：

<i class="glyphicon glyphicon-cloud"></i>

我们可以使用 字体大小 属性使其成为用于显示的大尺寸图标。下面的示例说明了 字体大小 具有预定义类的属性。

例1： 在本例中，我们使用了 字体大小 属性，所有值都设置为不同的数字。

输出：

例2： 在本例中，我们使用了“ 竖起大拇指 “用拇指向上的形状上课&所有的值都设置为不同的数字。

输出：