vue中使用yarn引入fontawesome图标库

最新推荐文章于 2024-04-30 17:05:35 发布
最新推荐文章于 2024-04-30 17:05:35 发布
阅读量924 收藏 1
点赞数
分类专栏： 配置 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43841177/article/details/107285889
版权

vue中使用yarn引入fontawesome图标库

安装

yarn add font-awesome --save

引入

进入main.js文件

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

使用

fa + 选择的图标名（例如：fa-facebook）直接在类名中加入, 注意! 必须要有 fa ,不然无效!!

<i class="fa fa-facebook"></i>

图标选择

官网查找-> 地址
Zeal查询->查看博客

无为有处有还无
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
font-awesome使用方法
spcming的博客
09-23 1664
安装font-awesome，由于font-awesome没有什么依赖，所以安装最新版本即可 yarn add font-awesome 在webpack.config.js中进行如下配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') mod.
一个比NPM更快更安全可靠的JavaScript包管理工具——Yarn
尐轩web前端网络日志
02-09 3508
上一篇简单介绍了NPM包管理工具 在这篇文章中 我想给大家介绍一个取代使用NPM的包管理工具——Yarn 以及它与NPM之间的差异简介这个就是yarn的logo，应该是一只猫 Yarn的官网：传送门 来到官网，映入眼帘的就是这么几个大字（大单词~）富强，民主，文明，和谐…… 那是不可能的~ 这行英语的意思是： 极速、可靠、安全的依赖关系管理Yarn是Facebook、Google、Ex
yarn add @fortawesome/Font Awesome-free 安装失败
zsysem的博客
10-28 606
使用 来作为字体图标库。Font Awesome 提供了可缩放的矢量图标，允许我们使用 CSS 所 提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 安装: $ yarn add @fortawesome/fontawesome-free 但是在win10失败了。 用以下方法解决： win10 系统的话，用下面命令安装成功： $ yarn add --dev @fortawesome/fontawesome-free --no-bin-links 然后 $ npm r
vue3使用Font Awesome
最新发布
weixin_66810621的博客
04-30 632
FontAwesome的图标非常丰富，基本涵盖你所需要的所有，所以我推荐在你的前端项目中使用它！并且它在使用上是方便的，快速的。FontAwesome同样支持vue2！
Font-AweSome在Vue中的使用
王光迪的CSDN
01-28 4623
看到网上许多的文章依赖版本太老没办法用了，这里给上最新版，简单实用
如何在vue中使用Font Awesome库
daniel_rose4的博客
06-30 874
1.安装FontAwesome库：在项目的根目录下通过npm或者yarn安装FontAwesome库。
fontawesome-5.15.4-web.zip
09-24
Font Awesome 5.15.4最新版 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 前端字体库，目前最新专业版。 可用于页面设计、QT图标设计
vue-cli3 引入 font-awesome的操作
11-20
补充知识：在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的
Vue 第三方字体图标引入 Font Awesome的方法
12-10
Font Awesome 提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。还有很多优点不一一举例，可自行查看文档：...
让你在Vuepress中可以直接使用FontAwesome的图标
08-08
让你在Vuepress中可以直接使用Font Awesome的图标
浅析大数据Hadoop之YARN架构
浩天的博客
05-10 359
1.YARN 本质上是资源管理系统。YARN提供了资源管理和资源调度等机制 1.1原 Hadoop MapReduce 框架 对于业界的大数据存储及分布式处理系统来说，Hadoop 是耳熟能详的卓越开源分布式文件存储及处理框架，对于 Hadoop 框架的介绍在此不再累述，读者可参考 Hadoop 官方简介。使用和学习过老 Hadoop 框架（0.20.0 及之前版本）的同仁应该很熟悉如下...
extjs小图标(项目小图标大全)
10-12
extjs小图标(项目小图标大全)
yarn入门（一篇就够了）
阿甘兄
07-07 2024
是一个资源调度平台，负责为运算程序提供服务器运算资源，相当于一个分布式的操作系统平台，而MapReduce等运算程序则相当于运行于操作系统之上的应用程序。yarn主要由ResourceManager、NodeManager、ApplicationMaster和Container等组件构成，如下图： ResourceManager（RM）主要的作用如下：NodeManager（NM）主要作用如下：ApplicationMaster（AM）作用如下：Container是yarn中的资源抽象，它封装了某个节点上的
Font Awesome 5 Vue组件
cuk5340的博客
07-24 206
Vue-fontawesome (vue-fontawesome) Font Awesome 5 Vue component Font Awesome 5 Vue组件 View demo 查看演示 Download Source 下载源 安装 (Installation) $ npm i --save @fortawesome/fontawesome $ npm i --sav...
CSS实现动态按钮
热爱编程 热爱生活
09-24 635
1.animate（）函数使用 $(selector).animate(styles,speed,easing,callback) 分析: 1.导入Jquery地址 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="jquery.color.js"></script> 我的github下载地址： ...
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记
ProgramNovice的博客
07-31 1274
HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记 这是我参与「第四届青训营」笔记创作活动的的第7天，利用HTML+CSS实现按钮手风琴效果。
WPF FontAwesome字体使用方法
wpyok168的博客
12-17 879
WPF FontAwesome字体使用方法
uni-app中引入font-awesome
好气嗷，但仍要保持微笑!
02-21 5467
1)安装依赖 npm install font-awesome --save 2）在main.js中引入，作为全局样式 import 'font-awesome/css/font-awesome.min.css'; 3）运行程序 npm run dev 这时，打开微信开发小程序，会出现404错误 解决方法： build/webpack.base.conj.js文件中将limit注释 之...
vue中使用引用font-awesome字体图标fontawesome 简单方法
Chris__wang的博客
05-06 4669
看见网上相关文档都需要安装好多依赖，有点麻烦，其实只需要安装一个font-awesome就行 第一步安装依赖 cnpm install font-awesome --save 或者 npm install font-awesome --save 个人倾向于前者，因为真快啊 第二步引入依赖样式文件 在main.js文件中引入 //引入font-awesome import ...
Vue2中怎么使用Font Awesome详解
07-08
在 Vue 2 中使用 Font Awesome 可以通过以下步骤进行： 步骤 1：安装 Font Awesome 在命令行中执行以下命令来安装 Font Awesome 的依赖： ```bash npm install @fortawesome/fontawesome-svg-core npm install @fortawesome/free-solid-svg-icons npm install @fortawesome/vue-fontawesome ``` 步骤 2：在 main.js 中引入 Font Awesome 在 `main.js` 文件中添加以下代码来引入 Font Awesome： ```javascript import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(fas) Vue.component('font-awesome-icon', FontAwesomeIcon) ``` 步骤 3：使用 Font Awesome 图标 在你的 Vue 组件中，你可以直接使用 `<font-awesome-icon>` 标签来使用 Font Awesome 图标。 ```html <template> <div> <font-awesome-icon icon="coffee" /> </div> </template> ``` 你可以在 `icon` 属性中指定你想要使用的图标的名称，比如上面的例子中使用了 "coffee" 图标。 你还可以设置其他的属性来自定义图标的大小、颜色等。例如： ```html <template> <div> <font-awesome-icon icon="coffee" size="2x" :style="{ color: 'red' }" /> </div> </template> ``` 这样就可以将图标的大小设置为 2 倍，并将颜色设置为红色。 这就是在 Vue 2 中使用 Font Awesome 的基本步骤。你可以根据需要在组件中使用不同的 Font Awesome 图标和自定义样式。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值