iconfont的三种使用方式详解

前端之家收集整理的这篇文章主要介绍了iconfont的三种使用方式详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号,并且新建一个项目,这个项目包含了你所有要用到的图标。我们需要选中需要的图标放到自己的项目中,并下载下来放到自己项目下的iconfont文件夹之下。(需要更新图标时,下载包也需要重新下载更新)

方式一:使用symbol方式(本质是用svg标签构成的)

第一步:为了代码更好的复用,我们封装一个svg-icon组件,代码如下:

第二步:在main.js中引入

文件 import '@/assets/icons/iconfont.css' // Unicode和fontclass方式的样式包 import SvgIcon from '@/components/SvgIcon' // 使用icon组件 Vue.component('svg-icon',SvgIcon) // 引入全局组件,也可以在局部引入

第三步:使用

在自己需要用到的组件中:

另外两种使用方式是使用unicode和fontclass方式,如上面的代码所示引入与使用

然后我们谈谈这三种方式的优缺点吧

unicode:

优点:

  • 兼容性最好,支持ie6+
  • 支持按字体的方式去动态调整图标大小,颜色等等

缺点:

  • 不支持多色图标
  • 在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
  • 不直观,看unicode码很难分辨什么图标

fontclass:

  • 兼容性良好,支持ie8+
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。

symbol:

  • 支持多色图标了,不再受单色限制。
  • 支持像字体那样通过font-size,color来调整样式。
  • 支持 ie9+
  • 可利用CSS实现动画。
  • 减少HTTP请求。
  • 矢量,缩放不失真
  • 可以很精细的控制SVG图标的每一部分

综上所述的一些特点,个人比较推荐使用symbol或者fontclass的方式

总结

以上所述是小编给大家介绍的iconfont的三种使用方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

猜你在找的JavaScript相关文章