vue-cli3 引入 font-awesome的操作

 更新时间:2020年08月11日 08:35:24   作者:woyaoshengzhang  
这篇文章主要介绍了vue-cli3 引入 font-awesome的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在 package.json 添加

"font-awesome": "^4.7.0"

执行 npm install

在 main.js 引入

// font

import "font-awesome/css/font-awesome.min.css"

补充知识:在Vue2.0中引入font-awesome,并在Element-ui中正确显示font-awesome的icon

如下所示:

npm install font-awesome --save

在main.js中引入

import 'font-awesome/css/font-awesome.css'

在App.vue的

[class^="el-icon-fa"], [class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome!important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 @import '../node_modules/font-awesome/css/font-awesome.css';
 $fa-css-prefix: el-icon-fa;

正常使用

 <i class="fa fa-user"></i>
    <i class="fa fa-tree"></i>
    <el-button icon="el-icon-fa fa-user" size="mini">用户</el-button>
    <el-button icon="el-icon-fa fa-tree" size="mini">用户</el-button>

以上这篇vue-cli3 引入 font-awesome的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue项目中quill-editor带样式编辑器的使用方法

    Vue项目中quill-editor带样式编辑器的使用方法

    这篇文章主要介绍了Vue项目中quill-editor带样式编辑器的使用方法,可以更改插入图片和视频,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue.js开发环境安装教程

    vue.js开发环境安装教程

    这篇文章主要为大家详细介绍了vue.js开发环境的安装教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue 数据绑定的原理分析

    Vue 数据绑定的原理分析

    这篇文章主要介绍了Vue 数据绑定的原理,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • VUE实现一个Flappy Bird游戏的示例代码

    VUE实现一个Flappy Bird游戏的示例代码

    这篇文章主要介绍了VUE实现一个Flappy Bird的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue+elementui 对话框取消 表单验证重置示例

    vue+elementui 对话框取消 表单验证重置示例

    今天小编就为大家分享一篇vue+elementui 对话框取消 表单验证重置示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 在Vue中使用axios请求拦截的实现方法

    在Vue中使用axios请求拦截的实现方法

    这篇文章主要介绍了在Vue中使用axios请求拦截,需要的朋友可以参考下
    2018-10-10
  • vue.js实现简单的计算器功能

    vue.js实现简单的计算器功能

    这篇文章主要为大家详细介绍了vue.js实现简单的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 详解Vue的七种传值方式

    详解Vue的七种传值方式

    这篇文章主要介绍了Vue的七种传值方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • vue的.vue文件是怎么run起来的(vue-loader)

    vue的.vue文件是怎么run起来的(vue-loader)

    通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下
    2018-12-12
  • Vue + ts实现轮播插件的示例

    Vue + ts实现轮播插件的示例

    这篇文章主要介绍了Vue + ts实现轮播插件的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11

最新评论