Vue 第三方字体图标引入 Font Awesome的方法

Font Awesome

用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利，不管是在加载还是修改方面，字体图符远远优于图片。但是饿了吗封装的Element UI提供的字体图符少之又少，又不想用图片，只能自己扩展图符咯。

Font Awesome 提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。还有很多优点不一一举例，可自行查看文档：http://fontawesome.dashgame.com/

npm 安装 font-awesome

npm install font-awesome --save-dev1

font-awesome引入

在 mani.js 文件中引入 font-awesome

import 'font-awesome/scss/font-awesome.scss'1

然后在组件中使用即可实现：

<span class="fa fa-camera-retro fa-lg"></span>

以上这篇Vue 第三方字体图标引入 Font Awesome的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中引入第三方字体文件的方法示例

    vue中引入第三方字体文件的方法示例

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者https://www.jb51.net/fonts/点击此链接,进行字体下载 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src:

  • Vue cli 引入第三方JS和CSS的常用方法分享

    第一种方法: 直接在index.html中引入 js <script type="text/javascript" src="static/mui.min.js" ></script> css <link rel="stylesheet" href="static/mui.min.css" rel="external nofollow" /> 第二种 在单页面中用impo

  • Vue 中如何正确引入第三方模块的方法步骤

    方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件

  • VUE引入第三方js包及调用方法讲解

    VUE引入第三方js包及调用方法 1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script> 3.mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mou

  • Vue 第三方字体图标引入 Font Awesome的方法

    Font Awesome 用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利,不管是在加载还是修改方面,字体图符远远优于图片.但是饿了吗封装的Element UI提供的字体图符少之又少,又不想用图片,只能自己扩展图符咯. Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.还有很多优点不一一举例,可自行查看文档:http://fontawesome.dashgame.com/ npm 安

  • Vue2.x中利用@font-size引入字体图标报错的解决方法

    利用 vue-cli 搭建的项目平台 利用stylus写的css样式 有 css-loader 依赖包x 下图是 webpack.base.conf.js 关于字体文件的配置 有人这里会有重复的字体文件的配置,删除一项即可 出现的问题:引入字体图标出现问题 1.报错 将字体引入的相对路径改成绝对路径 相对路径 绝对路径 2.不报错,但是出现的字体图标是小方框 有警告信息: 小方块: 报错是因为重定向的问题 出现上述问题的原因 ①没在用到的地方引入字体的样式文件 ②使用的是后缀名为 .styl 文

  • webpack配置导致字体图标无法显示的解决方法

    问题:在项目开发时使用字体图标,报错如下: 所有的字体图标都不能正常显示了,报错提示不能解码字体. 解决问题:找了很久,最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误:在 webpack.base.conf.js文件中删除 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, 总结: 其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译,自己写的和自动生成的产生冲

  • 本地Bootstrap文件字体图标引入却无法显示问题的解决方法

    本地Bootstrap文件字体图标引入却无法显示问题的解决方法

    你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题. 在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap字体图标

  • Vue框架中正确引入JS库的方法介绍

    本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U

  • Vue elementui字体图标显示问题解决方案

    问题如下 在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) } 加上 publicPath: '../../' 运行项目还是不行 ,Failed to d

  • Tornadofx学习笔记之IconTextFx开源库整合5000+个字体图标

    Tornadofx学习笔记之IconTextFx开源库整合5000+个字体图标

    JavaFx中其实也可以直接使用字体图标iconfont的,只需要加载ttf字体文件,之后设置unicode即可,具体可以看我给出的代码 既然JavaFx可以,那么以JavaFx为基础的Tornadofx自然也是可以使用字体图标的 以前开发的时候,总是需要去阿里巴巴矢量图去找图标,并下载到本地,然后在加到项目里,十分的麻烦 便是找到了Material Design风格的字体图标,5000+,然后封装成了一个开源库IconTextFx 更多详情请查看IconTextFx文档 下面是图标的预览图的一

  • webpack中使用iconfont字体图标的方法

    入坑webpack,开始加载一些图片.js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont. 1.修改css中字体文件路径 我把css和字体文件放在同级目录下 打开iconfont.css文件,原本的字体文件引用路径是用的css的方式,即下面图片中所示的 同级目录:直接用文件名 上一级目录:../ 但是,我们是在webpack环境下使用,所以要改成webpack引用规则,即改成下面图片所示 同级目录: ./ 上一级目

  • 解决vue 项目引入字体图标报错、不显示等问题

    问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

随机推荐