vue font awasome 的使用-526互联

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;
}

这样就可以了。