iconfont字体图标的使用

  一、准备工作

  1、首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以

  2、登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例

  a) 搜索删除图标

  

iconfont字体图标的使用

  b) 选择需要的图标,然后可以执行三种操作:添加入库收藏或者直接下载,可以根据自己的实际情况来选择相应操作,这里选择添加入库,操作完可以看到图标已经添加进右上角的购物车里了

  

iconfont字体图标的使用

  c) 点击右上角的购物车,可以看到如下页面,这里也是根据自己的具体情况来进行操作

  一键清除:可以清掉所有图标

  下载素材:下载图标资源,可以指定颜色、大小以及格式

  下载代码:下载字体图标的代码,包括demo的html和css文件、iconfont的css、js以及各种字体文件

  添加至项目:建立一个自己的图标库,将图标整合在一起,方便后续应用在自己的实际项目中

  

iconfont字体图标的使用

  d) 这里选择添加至项目,一开始没有项目,需要点击+号的图标创建一个新项目,然后把新图标加入到新项目中。如果已经有了项目,则选择项目并点击确定即可。这里的项目其实就是上面所说的图标库了

  

iconfont字体图标的使用

  e) 进入到我的项目(图标库)中,可以看到如下页面

iconfont字体图标的使用

  下载至本地:下载该图标库的代码到本地,代码包括demo的html和css文件、iconfont的css、js以及各种字体文件,demo是使用说明,iconfont文件是使用这个图标库所必须的文件,可根据使用的具体方式引用相应文件

iconfont字体图标的使用

  UnicodeFontclass以及Symbol:三种使用的方式,在下载到本地的代码中找到demo,demo的html文件中有这三种方式的详细使用说明

  点击查看在线链接:在页面上可以看到一串字符串.css,这个就是这个图标库的在线链接,在实际项目中引入该链接即可使用而无需下载到本地(这个是FontClass的,Unicode跟Symbol的有属于自己的在线链接)

  需要注意的是,如果在图标库中新增加了图标,则需要更新在线链接并把该链接重新引入到实际项目中,或者重新下载代码到本地,然后在实际项目中引入最新的iconfont文件

  二、使用介绍

  以下的使用方式都是来自下载下来的demo代码,把这些都整合在一起,方便比较和查阅。至于使用在线链接的方式,因为比较简单,这里就不做介绍,可以看下面的实战

  1、Unicode方式

  Unicode是字体在网页端最原始的应用方式,特点是:

兼容性最好,支持ie6+,及所有现代浏览器

支持按字体的方式去动态调整图标大小,颜色等等

不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色

  注意:新版iconfont支持多色图标,这些多色图标在Unicode模式下将不能使用,如果有需求建议使用Symbol的引用方式

  使用步骤如下:

  a) 拷贝项目下面生成的font-face,如果想要深入了解font-face属性,可以点击这里还有here

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzwdgx.html