font awasome 是一个很经典的图标库。
目前已经更新到了V6版本。
但是从V5开始,这个库就已经闭源收费了。
所以开源库里面最新版本是V4.7。
https://www.npmjs.com/package/font-awesome/v/4.7.0
那么怎么使用呢?
main.js
import Vue from 'vue' import App from './App.vue' import 'font-awesome/css/font-awesome.min.css'; Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
原本到这里就可以结束了。
但是因为项目的限制,我们必须用unicode的方式引入。
官网虽然有使用方法,但是并没有写图标对饮的unicode。
这时我们可以直接去找源码。
比如我们想用 fa-minus-square-o 这个图标。
我们就去找源码。
.fa-minus-square-o:before { content: "\f147"; }
看到这个content,把content手动引用到我们自己的页面里面。
#c .ztree .button.noline_close:before, #c .ztree .button.noline_open:before, #c .ztree .button.root_open:before, #c .ztree .button.root_close:before, #c .ztree .button.roots_open:before, #c .ztree .button.roots_close:before, #c .ztree .button.bottom_open:before, #c .ztree .button.bottom_close:before, #c .ztree .button.center_open:before, #c .ztree .button.center_close:before { content: "\f196"; position: absolute; right: 0px; top:3px; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #999999; } #c .ztree .button.noline_open:before, #c .ztree .button.root_open:before, #c .ztree .button.roots_open:before, #c .ztree .button.bottom_open:before, #c .ztree .button.center_open:before { content: "\f147"; position: absolute; right: 0px; top:3px; font: normal normal normal 14px/1 FontAwesome; font-size: 17px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: unset; color: #009280; }
这样就可以了。