使用图标字体的原因
1、轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,不需要下载一个个图像。这样可以减少HTTP的请求数量,而且和HTML5的离线存储配合,可以对性能做出优化。
2、灵活性:不调字体可以像页面中的文字一样,通过font-size属性来对其进行大小的设置,而且还可以添加各种文字效果,如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话!
3、兼容性:图标字体支持现代浏览器,甚至是低版本的IE浏览器,所以可以放心的使用它。
4、相比于位图放大图片会出现失真、缩小又会浪费掉像素点,图标字体不会出现这种情况。
下载icomoon图标字符
链接: https://icomoon.io/#home.
进入icomoon官网首页,点击下面图片中红框的位置
然后选择自己想要的图标(通过点击对于图标进行选择),如果想要全选就按照图中箭头指向的方式进行全选或取消选择。
如果当前图标集不能满足需求,可以滑动滚动条至底部,点击从库添加图标,如下图所示。
选择需要的图标集点击add进行添加。
选择完成需要的图标以后就点击最下方的产生字型图标,对选中图标进行生成。
点击生成后,就可以看到生成的对于图标集,然后在点击下载就会下载一个icomoon的压缩包。
解压后,将文件夹中的fonts文件夹复制粘贴到当前项目的文件夹中,如果呀查看对于的图标可打开demo.html文件找到需要的图标字体。
icomoon的使用
在demo.html文件中找到需要的图标,复制图标对应的小方框,将其放在需要显示的标签内。这里虽然复制的每一个小方框看起来都是一样的,但在使用上都是不一样的,所以要去复制相应的小方框。
使用代码如下,这里是将其放在span标签内。
<span class="prep" ></span>
<span class="next" ></span>
然后找到icomoon文件夹中的style.css文件,打开复制下图中的css代码到当前文件的style中。
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?26jsqa');
src: url('fonts/icomoon.eot?26jsqa#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?26jsqa') format('truetype'),
url('fonts/icomoon.woff?26jsqa') format('woff'),
url('fonts/icomoon.svg?26jsqa#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
接着再设置对应标签的font-family: ‘icomoon’; 具体代码如下:
.prep,.next{
font-family: 'icomoon';
font-size: 30px;
corlor: #0f893d;
cursor: pointer;
padding-right: 10px;
}
如上代码,对于字体图标我们还可以设置字体的大小,颜色,关于对字体的设置都可以使用在字体图标上。
最后的使用的结果如下图: