CSS字体图标
字体图标的和字体的属性相同
首先需要下载图标
推荐:icomoon字库http://icomoon.io
阿里iconfont字库http://www.iconfontcn/
icomoon字库
选完自己想要的图标后点Generate Font
然后点Downlod下载
将下载好的压缩包解压 .把下载包里面的fonts文件夹放入页面根目录下
将style.css里面的这一部分复制到CSS或style里
然后打开刚才压缩包里的demo.html
然后复制要用的图标的小方块到html
将字体设置成font-family: “icomoon”;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>字体图标</title>
<style>
@font-face {
font-family: "icomoon";
src: url("fonts/icomoon.eot?pimgsa");
src: url("fonts/icomoon.eot?pimgsa#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?pimgsa") format("truetype"),
url("fonts/icomoon.woff?pimgsa") format("woff"),
url("fonts/icomoon.svg?pimgsa#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: "icomoon";
}
</style>
</head>
<body>
<span></span>
</body>
</html>
运行然后就出现了字体图标
span里面可以添加字体大小 font-size: 100px; 图标就变成了大图标
还可以添加颜色color: red; 就变成了红图标
追加图标
还需要用其他的图标
把压缩包里面的selection.json 从新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可。
然后重复开始的步骤替换掉原来的文件夹 fonts文件夹也需要替换
然后就可以使用追加的图标了