英特网校

前端开发中如何使用iconfont字体图标及注意事项

1.    什么是字体图标?

传统意义我们一般使用位图方式来表示:比如插入一张pnggifjpg等方式。如果我们需要对图片大小、颜色、换图操作是会比较麻烦,要修改图片需要使用图片编辑器(软件psai,不然很难对图片进行编辑、处理等操作。这是我们就引入图标字体来解决上面问题。

通俗的说就是图标用字体的方式来表示,可以对图标的部分属性进行控制(大小、颜色等):打开淘宝手机端,审查底部元素的图片,可以看到span便签里面不是传统的插入img便签,也没有设置背景,只有一个字体转换的□图标,这就是它用的图标字体。

2.    为什么要用字体图标?

1)、字体图标占用的空间少,34-50kb的大小,可以存放很多的不同的图标,而传统意义的插入图片的方式,随着图片增加,占用空间也逐渐增加。

2)、可以利用字体的一些属性修改字体图标的样式(大小、颜色等),利用font-sizecolor控制,方便我们的操作。

比如:打开淘宝手机端,如果底部选择不同选项时,被激活的按钮需要修改成红色,传统的方式是点击时加载另一张图片,而我们字体图标直接修改字体颜色,方便快捷。【这里也可以省略一张图片的空间,如果换一张图片也不必要同时替换两张图片】

另外,

3)、位图图片不能很好地进行缩放,当图片进行放大时会失真(即变模糊),当图片进行缩小时就会浪费掉像素。

【我们在移动端开发时,由于不同手机端像素比不同,如iphone6像素比为2iphone 6 plus像素比为3,如果我们用同样大小图片在6中显示正常,在6 plus中可能就会变模糊】

图标字体一般都是矢量图,可以放大缩小。图片不失真。适配多种手机不影响效果。

4)、位图加载每一张图片都需要一次“http请求”,因此也拖慢了整个加载页面的时间。

5)、兼容性好,几乎现在主流的浏览器都支持。

字体图标的缺点:

它们只能被渲染成单色或者css3的渐变色;【如果需要多种复杂颜色,图标字体无法实现】

使用的图标字体都是别人做好的,如果自己特有的图标字体,需要花时间去创作你自己的字符图标;

3、图标字体分类:

      1)、iconfont【阿里妈妈的字体库】

      地址: http://www.iconfont.cn/

2)、bootstrap字体

地址:https://v3.bootcss.com/components/

3)、layui字体图标

地址:https://www.layui.com/doc/element/icon.html

字体图标使用方式都是大同小异的,我们课程只介绍iconfont字体的使用,因为iconfont的字体库非常多,大家可以根据网站需求在iconfont字体库中搜索需要的图标。

4iconfont字体图标的使用:

1)、打开iconfont的官网http://www.iconfont.cn/或百度搜索下iconfont

2)、注册登录账号【大家自行在官网中注册】

3)、在搜索框中直接输入想要的图标【我们这里用首页“来演示】

4)、选中后添加到库

5)、点击购物车图标-点击添加到项目【新建或选择已有的项目】-确定

6)、打开项目后选择下载至本地

三种引入方法:unicodefontclasssymbol,一般用前两种,大家可以看对应得示例文件,打开demo_unicode来看下如何使用

第一步:拷贝项目下面生成的font-face

第二步:定义使用iconfont的样式

【第一步、第二步,不用理会,在iconfont.css中直接引用】

第三步:挑选相应图标并获取字体编码,应用于页面

<i class="iconfont">&#x33;i> &#x33;对应unicod编码(自动生成)

如果是使用fontclass <i class="iconfont icon-xxx">i> icon-xxx对应类名

1、      演示实际操作

2、         演示添加字体图标到对应的项目后如何使用

实践操作中建议字体文件单独放一个font文件里面,增加字体图标直接覆盖文件。不建议奖iconfont.css放在对应的css样式文件中,省去不必要麻烦


评论中心

登录后可评论,请 登录 注册