在Vue中使用Font Awesome

使用Font Awesome

浏览

Font Awesome官网地址：https://fontawesome.dashgame.com/

使用

安装依赖

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons

创建 fontawesomeUI.js 文件，去Font Awesome官网找一下我们需要的图标。例如：User，在图片加上fa前缀，使用 import 导入，library.add方法添加， 然后 export 导出 FontAwesomeIcon

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

import {
  faUser,
  faRunning
} from '@fortawesome/free-solid-svg-icons';

library.add(
  faUser,
  faRunning
);

export default FontAwesomeIcon

在main.js 中使用fontawesomeUI

import fontawesomeUI from './utils/fontawesomeUI'
Vue.component('font-awesome-icon', fontawesomeUI);

在vue文件中使用

 <font-awesome-icon :icon="['fas', 'running']" class="icon righticon" ></font-awesome-icon>

自定义样式之后，实现效果