免费获取策划方案多一份参考,总有益处

xk星空观点

Paichen view

案例778

xk星空观点

舍弃图片图标,用字体图标

来源:xk星空官方网站|时间:2014-11-13|浏览:

舍弃图片图标,用字体图标

在常规的网页前端开发中,图标都是用图片来代替的,下面就介绍一款字体图标,专用与图标的“Font Awesome”

“Font Awesome”现在越来月流行是因为“Bootstrap”框架越来越流行,“Font Awesome”慢慢的才被大家了解,学习!

截图00.jpg

上图是在ps里面的截图,就是用此字体来写的,可以任意改变他的大小,颜色!在网页中使用也是一样的!可以直接通过css来控制他的大小,颜色,这就比以前的用图片来代替图标方便多了,不过在网页中,ie6是不支持的。

一:在网页中使用此图标

1:到官网下载最新的字体, www.fontawesome.io

2:下载后解压出来里面就有css文件和字体文件,css文件有两个, 一个是压缩版的,一个是没压缩的

3:新建一个html文件,只需要把css文件引入进入就可以了

4:图片都是用标签,只需要给i标签添加class类就可以了,如下:

上面给i标签添加了三个类,第一个是必须的,第二就是图片的样式,就是说你需要显示哪种图标,第三个图标的大小,注意:图标一共有400多个,每个图标对应的类名是一样的,具体参考:www.fontawesome.io/cheatsheet/
 

上一篇:提高工作效率

下一篇:在工作中学习

留言

返回顶部

君
重庆网站建设xk星空观点舍弃图片图标,用字体图标
XML 地图