Vue.js 使用 FontAwesome
这里以使用微信和支付宝的 Icon 为例。
步骤
安装包
其中 fontawesome-svg-core 为核心包,free-solid-svg-icons 为默认的 fas 资源包,free-brands-svg-icons 为品牌图标的 fab 资源包。
另外这里使用的 vue 2.x ,需要安装 vue-fontawesome@latest 包。bashnpm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/vue-fontawesome@latest
1
2
3
4在 main.js 中导入组件和图标
javascriptimport { library } from '@fortawesome/fontawesome-svg-core' import { faWeixin, faAlipay } from '@fortawesome/free-brands-svg-icons' import { faRetweet, faArrowCircleDown } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faWeixin, faAlipay) library.add(faRetweet, faArrowCircleDown) Vue.component('font-awesome-icon', FontAwesomeIcon)
1
2
3
4
5
6
7
8
9在页面展示图片
xml<font-awesome-icon :icon="['fab', 'weixin']" style="color: #03dd6c;" /> <font-awesome-icon :icon="['fab', 'alipay']" style="color: #1977ff;" />
1
2
其它包
除了上面用到的包之外,还有如下这些,其中 pro 开头的几个包是要付费使用的。
安装方式和上面的类似。
package name | prefix |
---|---|
free-solid-svg-icons | fas |
free-regular-svg-icons | far |
free-brands-svg-icons | fab |
pro-solid-svg-icons | fas |
pro-regular-svg-icons | far |
pro-light-svg-icons | fal |
pro-duotone-svg-icons | fad |