CSS图标

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

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

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

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

方法: 为了使用图标,我们需要在

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

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

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

方法1:字体图标

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

部分中添加以下链接。

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

语法:

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

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

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

HTML

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< i class = "fa fa-cloud" style = "font-size:32px;" ></ i >
< i class = "fa fa-heart" style = "font-size:32px;" ></ i >
< i class = "fa fa-file" style = "font-size:32px;" ></ i >
< i class = "fa fa-car" style = "font-size:32px;" ></ i >
< i class = "fa fa-bars" style = "font-size:32px;" ></ i >
</ body >
</ html >


输出:

图片[1]-CSS图标-cppku-C++库

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

HTML

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< i class = "fa fa-heart" style = "font-size:28px;color:red;" ></ i >
< i class = "fa fa-heart" style = "font-size:30px;color:blue;" ></ i >
< i class = "fa fa-heart" style = "font-size:32px;color:red;" ></ i >
< i class = "fa fa-heart" style = "font-size:34px;color:blue;" ></ i >
< i class = "fa fa-heart" style = "font-size:36px;color:red;" ></ i >
</ body >
</ html >


输出:

图片[2]-CSS图标-cppku-C++库

方法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: 在本例中,我们使用了“ 材质图标 “使用所需图标初始化。

HTML

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 >GeekforGeeks</ h1 >
< i class = "material-icons" >cloud</ i >
< i class = "material-icons" >favorite</ i >
< i class = "material-icons" >attachment</ i >
< i class = "material-icons" >computer</ i >
< i class = "material-icons" >traffic</ i >
</ body >
</ html >


输出:

图片[3]-CSS图标-cppku-C++库

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

HTML

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 >GeekforGeeks</ h1 >
< i class = "material-icons" style = "font-size:30px;" >cloud</ i >
< i class = "material-icons" style = "font-size:40px;" >cloud</ i >
< i class = "material-icons" style = "font-size:50px;" >cloud</ i >
< i class = "material-icons" style = "font-size:60px;" >cloud</ i >
< i class = "material-icons" style = "font-size:70px;" >cloud</ i >
</ body >
</ html >


输出:

图片[4]-CSS图标-cppku-C++库

方法3:引导图标

要使用引导图标,请在

部分中添加以下链接。

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

语法:

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

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

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

HTML

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 >GeekforGeeks</ h1 >
< i class = "glyphicon glyphicon-cloud" style = "font-size:28px;" ></ i >
< i class = "glyphicon glyphicon-user" style = "font-size:30px;" ></ i >
< i class = "glyphicon glyphicon-thumbs-up" style = "font-size:32px;" ></ i >
< i class = "glyphicon glyphicon-remove" style = "font-size:34px;" ></ i >
< i class = "glyphicon glyphicon-envelope" style = "font-size:36px;" ></ i >
</ body >
</ html >


输出:

图片[5]-CSS图标-cppku-C++库

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

HTML

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 >GeekforGeeks</ h1 >
< i class = "glyphicon glyphicon-thumbs-up" style = "font-size:20px;" ></ i >
< i class = "glyphicon glyphicon-thumbs-up" style = "font-size:30px;" ></ i >
< i class = "glyphicon glyphicon-thumbs-up" style = "font-size:40px;" ></ i >
< i class = "glyphicon glyphicon-thumbs-up" style = "font-size:50px;" ></ i >
< i class = "glyphicon glyphicon-thumbs-up" style = "font-size:60px;" ></ i >
</ body >
</ html >


输出:

图片[6]-CSS图标-cppku-C++库

© 版权声明
THE END
喜欢就支持一下吧,技术咨询可以联系QQ407933975
点赞15 分享