一、字体图标
字体可以设计成各种各样的形状,当然也可以直接将字体设置成图标来使用,这就是字体图标。
字体图标在放大时不会失真,并且可以随意切换颜色,在用到很多个图标时,文件相对图片较小。
阿里icons 网站上提供了非常多的图标可供下载,使用时只需要将喜欢的图标添加到购物车,并从侧边栏打开购物车选择下载代码
按钮来下载字体图标相关的压缩文件。
将下载好的压缩文件解压,并文件夹中的 iconfont.ttf 文件拷贝到项目目录的 fonts 目录下,创建 HTML 页面,在该页面中引入下载好的字体图标,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*引入字体图标*/
@font-face {
font-family: "iconfont";
src: url("./fonts/iconfont.ttf");
}
i {
font-family: "iconfont";
}
</style>
</head>
<body>
<i>字体图标</i>
</body>
</html>
在 LiverServer 中打开 HTML 页面,效果如下:
如果想要显示图标,我们可以打开解压文件夹中的 demo.html 文件,该文件中显示了我们应该如何使用这个字体图标:
修改我们自己写的 HTML 页面,将 i
元素中的文字内容替换为具体的图标编号,代码如下所示:
<i></i>
刷新页面,效果如下:
图标显示出来了,但是是斜体的,并且非常小,我们可以像设置字体一样设置字图标,添加如下 CSS 字体样式设置的代码:
i {
font-family: "iconfont";
font-style: normal;
font-size: 100px;
}
刷新页面,效果如下:
但是这种设置样式的方式是对页面所有的图标进行设置,在开发中更常用的方式是给 i 元素一个 class 属性,通过 class 属性设置不同位置的图标的样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "iconfont";
src: url("./fonts/iconfont.ttf");
}
.iconfont {
font-family: "iconfont";
font-style: normal;
font-size: 100px;
}
.icon {
font-family: "iconfont";
font-size: 200px;
display: inline-block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="icon"></i>
</body>
</html>
刷新页面,效果如下:
另外我们在每一次使用图标的时候都要去复制这个图标的编码,这非常的不方便,那么其实我们可以不使用字符实体的方式把字体图标展示出来。
打开字体文件夹中的 iconfont.css 文件,该文件中已经为我们设置好了字体图标的样式,如下图所示:
我们可以将如下代码拷贝到我们的项目文件中
.icon-huojian::before {
content: "\e69a";
}
之后我们如果想要在使用图标,就可以直接通过添加 class 属性的方式来引入图标了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "iconfont";
src: url("./fonts/iconfont.ttf");
}
.iconfont {
font-family: "iconfont";
font-style: normal;
font-size: 100px;
}
.icon {
font-family: "iconfont";
font-size: 200px;
display: inline-block;
width: 200px;
height: 200px;
}
.icon-huojian::before {
content: "\e69a";
}
</style>
</head>
<body>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="icon"></i>
<!-- 不使用字符实体的方式展示出来,直接引入两个 class,一个是图标,一个是图标样式 -->
<i class="iconfont rockets"></i>
</body>
</html>
使用 LiverServer 打开 HTML 页面,效果如下:
在以后的开发中我们可以直接将 iconfont.css 文件通过 link 元素引入到 HTML 页面中,想要使用什么图标就可以直接通过添加 class 属性的方式来实现了。