iconfont 的三种使用方式
1. Unicode
- 个人习惯在src目录下新建一个icon文件夹存放下载的样式文件
- 然后在src目录下新建style.css文件统一管理样式
@font-face { font-family: "iconfont"; src: url('./icon/iconfont.eot'); /* IE9*/ src: url('./icon/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./icon/iconfont.woff') format('woff'), /* chrome, firefox */ url('./icon/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('./icon/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family:"iconfont" !important; font-size:56px; color: red; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } 复制代码
- 在 main.js 中引入style.css
import './style.css' 复制代码
- 现在即可挑选相应图标并获取字体编码，应用于页面
<i class="iconfont"></i> 复制代码
2. Font-class
使用方式与使用unicode相似，只需修改下style.css文件
- 修改 style.css文件（同样别忘了main.js文件中引入）
@import './icon/iconfont.css' 复制代码
- 即可用font-class的方式在页面使用图标
<i class="iconfont icon-fenxiang"></i> 复制代码
3. Symbol
区别于unicode与font-class，使用symbol需要引入的是js文件，此方法生成的图标可以不用发送woff|eot|ttf|这些很多个字体库请求了，兼具前两种方法的优点，是正真的矢量图标，推荐使用。
- 在main.js中引入图标js文件
import './icon/iconfont.js' 复制代码
- 在style.css文件中写入图标样式（同样别忘了main.js文件中引入）
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 复制代码
- 即可用symbol的方式在页面使用图标
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fenxiang"></use> </svg> 复制代码
补充：自己动手封装Icon组件
- 组件模板icon-svg.vue
<template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: 'icon-svg', props: { iconClass: { type: String, required: true } }, computed: { iconName() { return `#icon-${this.iconClass}` } } } </script> <style> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 复制代码
- 全局引入
import IconSvg from '@/components/icon-svg' //全局注册icon-svg Vue.component('icon-svg', IconSvg) 复制代码
- 现在就可以优雅的在项目中使用图标啦，快去试试吧~
<icon-svg icon-class="fenxiang" />
