图标字体的使用

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

使用步骤

一、输入网址

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

三、找到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的方式,因为这更加符合前端开发时的开发习惯,感兴趣的小伙伴可以去官网查看其它两种使用方式。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171223G0AHJQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券