图标字体的使用

各位童鞋，大家好，今天的内容非常简单，但是却是各位初学者小白童鞋经常会问到的一个问题，图标字体的使用，今天吉吉老师就带着大家一起了解一下图片字体的使用，希望能够对大家有所帮助。

使用步骤

一、输入网址

二、找到想用的图标，点击添加入库

三、找到cart，点击下载源码

四、压缩包解压后，找到iconfont.css文件

五、在自己的HTML文件中引入iconfont.css文件

六、给想使用图标的元素添加css

案例demo

这里吉吉老师拿出我们常用的网页搜索栏，作为此篇文章的小demo，大家也可以尝试一下。

HTML部分：

CSS部分：

.search{

width: 220px;

height: 22px;

position: relative;

margin: 0 auto;

}

input{

width: 220px;

height: 22px;

position: absolute;

outline: none;

border: 1px solid #ccc;

transition:border .3s;

}

i{

/*使用绝对定位将图标固定在它应该出现的位置*/

position: absolute;

top: 5px;

right: 5px;

color: #ccc;

transition: color .3s;

}

div:hover input{

border: 1px solid #4C4C4C;

}

div:hover i{

color: #4C4C4C;

}

总结

总体来讲，iconfont的用法还是非常简单的，用代码代替图片也使得网页加载速度更快，并且因为是文字图标，改变图标的颜色也变得特别方便。值得注意的是，iconfont给我们提供了三种引入图标字体的方法，分别是font-class引用、symbol引用、unicode引用，那么这三种引入方式也是各有优缺点，不过本人更加倾向于font-class的方式，因为这更加符合前端开发时的开发习惯，感兴趣的小伙伴可以去官网查看其它两种使用方式。