iconfont的三种使用方式详解


Posted in Javascript onAugust 05, 2018

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

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

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

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName" rel="external nofollow" ></use>
 </svg>
</template>
<script>
export default {
 name: 'svg-icon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.iconClass}` // 注意:因为此处绑定的svgClass名已经包含#icon,所以复制symbol名字事不需要名字的前缀了
  },
  svgClass() {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>
<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

第二步:在main.js中引入

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

第三步:使用

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

<template>
 <div>
 <!--方式一:使用svg-->
 <svg-icon class="h1" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon>
 <svg-icon class="h1" icon-class="hekriconshebeidengpao"></svg-icon>
 <!--方式二:使用unicode-->
 <i class="iconfont unicode"></i>
 <i class="iconfont unicode"></i>
 <!--方式三:使用iconfontclass-->
 <span class="iconfont icon-baojingliebiao classicon"></span>
 </div>
</template>
<script>
// import '@/assets/icons/iconfont.css'
</script>
<style>
  .h1{
 width:50px;
 height:50px;
 font-size: 100px;
 }
 .unicode{
 font-size: 30px;
 }
 .classicon{
  /* 可以自定义icon的颜色与大小 */
 font-size: 100px; 
 color:red;
 }
</style>

另外两种使用方式是使用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 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
JS实现留言板功能
Jun 17 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
js实现图片放大展示效果
Aug 30 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
node中的cookie的具体使用
Sep 13 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 #Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 #Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 #Javascript
深入理解JavaScript的async/await
Aug 05 #Javascript
js数据类型检测总结
Aug 05 #Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 #Javascript
vue实现简单的MVVM框架
Aug 05 #Javascript
You might like
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
JS解析XML实例分析
2015/01/30 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python 写的一个爬虫程序源码
2016/02/28 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
几道PHP面试题
2013/04/14 面试题
linux面试题参考答案(5)
2014/09/01 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
经济系大学生求职信
2013/10/01 职场文书
九年级物理教学反思
2014/01/29 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
矛盾论读书笔记
2015/06/29 职场文书
python和anaconda的区别
2022/05/06 Python
Fluentd搭建日志收集服务
2022/09/23 Servers