vue 中引入font-awesome

已于 2022-02-17 14:21:35 修改
阅读量3.6k 收藏 11
点赞数 5
分类专栏： 经验记录 Vue
于 2022-02-17 14:15:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wykqh/article/details/122982184
版权

vue.js javascript 前端

vue 中引入font-awesome

直接使用命令npm install font-awesome --save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了

入口js中引入

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

然后就可以使用了，例如下面这样

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

日日行不惧千万里
关注
专栏目录
vue导入Font Awesome
weixin_43989275的博客
05-27 1781
一、安装基础依赖 首先在npm中执行以下命令安装基础依赖库 npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/vue-fontawesome 二、安装样式依赖 然后安装免费的三种类型图标的样式依赖 npm i --save @fortawesome/free-solid-svg-iconsnpm i -...
font-awesome图标库的引入和使用（1）
balbalaijk的博客
07-29 1468
2、在vue文件中使用，由于使用的是vue版的font-awesome，所以在使用的方法上和原版的有一些不太一样。1、在main.js全局引入，别忘了npm i 下载先。
Vue-FontAwesome 项目教程
最新发布
gitblog_00523的博客
08-31 326
Vue-FontAwesome 项目教程 vue-fontawesomeFont Awesome Vue component项目地址:https://gitcode.com/gh_mirrors/vu/vue-fontawesome 1、项目的目录结构及介绍 Vue-FontAwesome 项目的目录结构如下： vue-fontawesome/ ├── examples/ │ └── vue...
vue中引入font-awesome
elie_yang的博客
06-03 3034
npm i -S font-awesome 之后在main.js中引入font-awesome import 'font-awesome/css/font-awesome.css' 执行npm run dev 时报错了： in ./node_modules/_font-awesome@4.7.0@font-awesome/fonts/fontawesome-webfont.woff?...
vue如何使用Font Awesome字体
itfans123的博客
02-02 668
以上是在Vue项目中使用Font Awesome图标字体的基本步骤。你可以根据自己的需求，使用不同的图标和样式来定制你的项目。
vue中引入font-awesome字体
Sweet_Waf的博客
05-29 429
vue中引入font-awesome字体@TOC vue中引入font-awesome字体 1.打开控制面板 npm install font-awesome --save 2.在入口文件main.js中引入 import 'font-awesome/css/font-awesome.min.css' 结束 ...
vue实战开发008:引入Font Awesome字体图标
kevinfan的博客
04-16 1058
今天在引用图标的时候发现Element-UI中的字体图标非常有限，我数了下当前只有70个可用字体图标，很难找到合适的字体图标使用，所以这里我准备引入Font Awesome字体图标,当前4.7版收录了675个字体图标可用，足够我们平时使用了。 首先我们先来安装Font Awesome字体，在Font Awesome 4版本中，可以通过使用npm安装font-awesome依赖，我们要在终端...
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的
vue3项目引入font-awesome
weixin_51029697的博客
03-30 2524
一、font-awesome的安装 cnpm i less less-loder css-loder style-loder file-loader font-awesome --save 二、在项目文件mian.ts中全局注册font-awesome import 'font-awesome/css/font-awesome.min.css' 三、使用 例如：<i class="fa XXX"><i/> class中一定要写fa开头，再加上icon名字才能正常显示..
解决vue项目使用font-awesome,build后路径的问题
10-18
在开发Vue项目时，经常会用到第三方库来增强功能，比如font-awesome用于引入各种图标字体。然而在使用font-awesome的过程中，经常会遇到在项目构建（build）之后图标字体文件路径不正确的问题。这个问题会影响项目在...
Vue 第三方字体图标引入 Font Awesome的方法
12-10
在Vue项目中引入Font Awesome，可以让开发者方便地利用其图标资源，而无需处理图片。 **安装Font Awesome** 在开始之前，首先确保你的项目已经安装了Node.js和npm。然后，通过npm（Node Package Manager）在你的...
vue项目中cdn引用font-awesome字体图标
guairena的博客
03-26 2042
在index.html中head标签中引入 <script src="//g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
Vue 项目中使用 font-awesome
小柒的前端之旅
09-21 4469
前面的话 在开发过程中，避免不了使用一些小图标，这篇文章介绍fontawesome。 安装 命令行敲： npm install font-awesome --save 在入口文件index.js中引入： import 'font-awesome/css/font-awesome.min.css'; 使用方法 <i class="fa fa-home fa-lg"> 主页</i...
vue 使用font-awesome 库
淹死的鱼的博客
06-25 202
下载 npm install less less-loader css-loader style-loader file-loader font-awesome -s 引入： import 'font-awesome/css/font-awesome.min.css'
vue3引用Font-Awesome字体图标库
键指江湖的博客
08-03 1459
介绍：这里安装引用的是Font-Awesome 6.x 版本，有专业版（付费），这里只介绍免费版字体使用方法。效果：此时看到同一个图标copy两种引用方式常规和实体的区别了吧。环境：vue3+ts+vite+element plus。4.使用 （看步骤3里面引用图标处）
在vue-cli的组件模板里使用font-awesome
wenjiusui8083的博客
12-12 3049
方法一： npm install font-awesome 在main.js里添加 import 'font-awesome/css/font-awesome.css' 方法二： 在官网下载代码到本地，现在应该是font-awesome-4.7，把整个文件夹放到static文件夹中，然后在index.html中加上<link rel="stylesheet" href="
记录在vue中引用font-awesome的方法
qq_38676663的博客
12-01 597
在vue引入font-awesome的方法
Vue项目中引用font-awesome图标库，公司四轮面试
2301_82244392的博客
04-16 478
从官网下载压缩包，我下载的是font-awesome-4.7.0，解压后copy到vue项目的static目录下，打开font-awesome-4.7.0文件夹，发现有css,fonts,less,scss等目录，我们只需要css和fonts目录，其余的删除不要。或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**《350页前端校招面试题精编解析大全》**内容大纲主要包括。在main.js中引用css。
如何在Vue中使用Font Awesome？
热门推荐
猿小白的博客
12-16 1万+
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 官网地址：http://www.fontawesome.com.cn/ 目录 1、安装依赖 2、引入依赖 3、使用方式 3.1、基本图标 3.2、大图标 3.3、固定宽度 3.4、用于列表 3.5、边框与对齐 3.6、动画 3.7、旋转与翻转 3.8、组合使用 1、安装依赖 npm install font-awesome --save 2、引入依赖 可以选.
vue中使用font-awesome
03-16
在Vue中使用Font Awesome，需要先安装Font Awesome的npm包。可以使用以下命令进行安装： ``` npm install --save @fortawesome/fontawesome-free ``` 安装完成后，在Vue组件中引入需要使用的图标，可以使用以下代码： ```javascript import { library } from '@fortawesome/fontawesome-svg-core' import { faUser } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faUser) Vue.component('font-awesome-icon', FontAwesomeIcon) ``` 在上面的代码中，我们先从`@fortawesome/fontawesome-svg-core`中导入`library`，然后从`@fortawesome/free-solid-svg-icons`中导入需要使用的图标，这里我们只导入了`faUser`。接着，我们从`@fortawesome/vue-fontawesome`中导入`FontAwesomeIcon`组件，并将`faUser`添加到`library`中。最后，我们将`FontAwesomeIcon`组件注册为全局组件，可以在任何Vue组件中使用。 在Vue组件中使用Font Awesome图标，可以使用以下代码： ```html <font-awesome-icon icon="user" /> ``` 在上面的代码中，我们使用`font-awesome-icon`组件，并将`icon`属性设置为需要使用的图标名称，这里我们使用了`user`图标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

日日行不惧千万里

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值