1.精灵技术
为了避免一写小的图片背景图片很多,然后多次请求服务器的情况下,采用了一张底色为透明的有很多小图标的大图,网页只要请求一次就可以了获取到大图,然后通过背景设置position控制坐标显示不同位置的小图可以实现;
2.文字图标
其实是将图标当成一种文字显示的,需要设置字体;
可以在网上找一些现成的图标
常用的网站:https://icomoon.io
阿里的字体库:http://www.iconfont.cn
1.在icomoon上下载图标的zip包解压后的fonts文件夹拷贝到项目中;
2.在项目中定义字体
<style type="text/css">
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#shejidaren') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
3.引用字体
span{
font-family: icomoon;
font-size: 100px;
color: red;
}
4.显示有两种方法
4.1 第一种 复制拷贝法
在官网上显示的突变后面复制
粘贴到代码中,代码中显示是看不见的;保存刷新浏览器就可以看到图标了;
4.2第二种是标签头添加图标内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#shejidaren') format('svg');
font-weight: normal;
font-style: normal;
}
span::before{
font-family: icomoon;
font-size: 100px;
color: red;
content: "\e97f";/*一定要加一个反斜杠\*/
}
</style>
</head>
<body>
<span></span>
</body>
</html>