字体图标的使用
程序员文章站
2024-02-16 10:41:40
...
字体图标的下载
下载字体图标：Icon Font字体图标
下载图标的步骤：
1.
2.
3.
字体图标的的使用
下载后的字体图标解压缩，找到下面两个文件
将这两个文件添加到需要使用的项目工程中将字体引入到HTML中
1.在样式中声明字体（在css中添加），代码如下
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}2.在内容中使用字体（在css中添加）
span {
font-family: "icomoon";
}
3.给字体添加结构
span::before {/*此处需要在css中书写*/
content: "\e900";/*\e900为字体图标的编号*/
}
或者
<span></span> /*此处在body中书写 其中空白部分是对字体图标进行的复制粘贴，下面详细介绍*/
打开下载文件中的index.html文件
应用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family: "icomoon";
}
</style>
</head>
<body>
<span></span> /*引入字体图标*/
</body>
</html>结果如图：