vue 使用font-awesome

1.npm 安装font-awesome 以及需要的所有依赖

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

2.在入口文件main.js里面引入相关的样式

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'library.add(faCoffee)Vue.component('font-awesome-icon', FontAwesomeIcon)Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components: { App },template: '<App/>'
})

如此，就可以愉快的使用了。

  <div id="app"><font-awesome-icon icon="coffee" /></div>
</template><script>
export default {name: 'App'
}
</script>

转载于:https://www.cnblogs.com/mmykdbc/p/10729363.html

vue 使用font-awesome相关推荐

Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
Vue 使用 Font Awesome 5
文章转载自:https://segmentfault.com/a/1190000013173840 前端小伙伴们都知道Font Awesome图标库,它具有丰富的常用图标,笔者开发时也经常使用,省却了 ...
vue使用 Font 字体 .ttf 格式
在assets的 styles 创建俩个文件夹一个font 和 ttf 字体.ttf 就放在ttf里面在font 文件夹里创建 log.css @font-face {font-family: & ...
vue 富文本vue-quill-editor 自定义字号大小和字体样式
一.先创建一个名为font的.css文件,然后引入自定义css // 字体样式大小 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=&q ...
Vue中使用自定义字体
为了美观效果,不想使用默认字体,使用其他好看的字体,此时在项目中就需要: 创建 assets/fonts/font.less @charset "UTF-8";@font-face ...
uni-app 多语言，国际化
问题描述:因为做到项目有海外用户所以需要配置多语言满足客户需求. 解决方法:在uni-app里有内置i18n多语言的配置,并且uni-app里的组件可是可以支持跟随设置语言进行变换的,i18n的主要功 ...
vue打包后，font格式错误
本地测试没有问题,项目打包以后,浏览器打开控制台,提示font格式错误: 把我的双引号给去掉了...-^- 不开心. 解决办法: 1. 把 font: 字体粗细字体大小/行高 "字体样式& ...
vue 2.0 使用 Font Awesome
只需要两步,亲测有效下载依赖font awesome npm/cnpm install font-awesome --save 在入口文件main.js全局引入 import "font- ...
Vue中使用Font Awesome
Vue中使用Font Awesome https://blog.csdn.net/zyj362633491/article/details/86422353[vue使用图标库] font地址(http ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...

vue 使用font-awesome

vue 使用font-awesome相关推荐

最新文章

热门文章