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 相关文章推荐
来自国外的页面JavaScript文件优化
Dec 08 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
简单实现js浮动框
2016/12/13 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python绘制多个子图的实例
2019/07/07 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python os.fork() 循环输出方法
2019/08/08 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
深圳茁壮笔试题
2015/05/28 面试题
2014年学习雷锋活动总结
2014/03/01 职场文书
家长对学生的评语
2014/04/18 职场文书
学校与家长安全责任书
2014/07/23 职场文书
小学运动会报道稿
2014/10/04 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
创业计划之特色精品店
2019/08/12 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
table不让td文字溢出操作方法
2022/12/24 HTML / CSS
mysql数据库如何转移到oracle
2022/12/24 MySQL