在vue-cli的项目中使用font-awesome

最新推荐文章于 2022-12-01 16:54:29 发布
最新推荐文章于 2022-12-01 16:54:29 发布
阅读量594 收藏 1
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxz340825/article/details/84303028
版权

百度到的有两种方法：
1 使用npm install font-awesome
在main.js里添加
import ‘font-awesome/css/font-awesome.css’
2 直接将font-awesome-4.7文件夹放到项目中，然后在index.html中加上<link rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css">
这两种方法对我的项目都没效果，也有可能是我用错了。。。
我的解决办法是直接将font-awesome-4.7文件夹放到项目中，然后在main.js里添加
import ‘./assets/font-awesome-4.7.0/css/font-awesome.min.css’

typico
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在 Vue 中使用 Font Awesome 字体图标
Bule_daze的博客
04-26 2260
安装 ???? 参考链接：https://blog.csdn.net/zyj362633491/article/details/86422353
vue中使用font-awesome的方式vue-fontawesome
qq_19245589的专栏
03-07 5292
最近用vue构建项目，想用font-awesome无意间看到了一个项目git的项目地址对于对font-awesome还不太熟悉的人来说，我提供个下面的教程我以用vue init webpack xx 生成的项目为例，1.第一步打开main.jsimport FontAwesomeIcon from '@fortawesome/vue-fontawesome' import fontawesome ...
vue-cli项目中使用Font Awesome 5
一捆铁树枝的博客
11-08 2307
Font Awesome 是一款很好用的字体图标，可以使用的图标很多，省了到处找图标的困扰；因此深受广大开发者喜爱，现在Font Awesome已经更新到5.X，使用方法上也和4以前的版本有所不同，并且还增加了收费版；其实免费版已经足够大家使用啦；下面我就具体介绍一下Font Awesome在vue脚手架项目中的使用方法； 官网：https://fontawesome.com/ 安装 Font...
vue-cli3 引入 font-awesome的操作
11-20
在 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的
记录在vue中引用font-awesome的方法
最新发布
qq_38676663的博客
12-01 575
在vue引入font-awesome的方法
在vue-cli的组件模板里使用font-awesome
niefudong的博客
09-12 182
方法一： npm install font-awesome 在main.js里添加 import 'font-awesome/css/font-awesome.css' 方法二： 在官网下载代码到本地，现在应该是font-awesome-4.7，把整个文件夹放到static文件夹中，然后在index.html中加上<link rel="stylesheet" href="/static...
在vue-cli的组件模板里使用font-awesome的两种方法
10-17
在Vue CLI的组件模板中使用Font Awesome，我们可以采取两种主要的方法。Font Awesome是一个广泛使用的图标库，提供了大量的矢量图标，可以方便地用于网页和应用设计。下面将详细介绍这两种方法。 ### 方法一：通过...
解决vue项目使用font-awesome,build后路径的问题
12-03
项目在本地run情况下显示正常，在build后font-awesome的css文件依赖的几个图标文件引用路径报错。 在webpack.base.conf.js中关于几个文件的配置如下： { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-...
vue-cli3 使用font awesome icon
huangbx_tx的博客
08-12 1132
在vue-cli3项目中需要使用font-awesome-icon，因此做一些记录。 下载 $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/vue-fontawesome 注意中间的包，表示下...
vue-cli3 引入 font-awesome
SIMBA1949的博客
09-20 2252
vue-cli3 引入 font-awesome 在 package.json 添加 "font-awesome": "^4.7.0" 执行 npm install 在 main.js 引入 // font import "font-awesome/css/font-awesome.min.css"
vue 安装使用font-awesome字体
woyaoshengzhang的博客
04-21 1298
1.npm安装font-awesome cnpm i font-awesome --save-dev 2.main.js引入font-awesome import 'font-awesome/css/font-awesome.css' 3.index.html引入css标签 <link href="https://cdn.bootcss.com/font-awesome/5....
vue项目中引入iconfont
热门推荐
denl0918的博客
01-05 2万+
iconfont方便又好用，介绍一下如何在vue项目中引入iconfont 1 进入iconfont官网，将需要的图标加入库，点击下载代码                                                            2 解压之后，将iconfont.css 和字体文件 copy到项目中
VUE-CLI项目中使用stylu，pug
xuelang_7的博客
11-03 758
VUE-CLI项目中使用stylus 1、npm install stylus-loader --save-dev （or） yarn add stylus-loader --save-dev 2、npm install stylus --save-dev （or）yarn add stylus --save-dev 3、&amp;amp;amp;lt;style lang=&amp;amp;quot;stylus&amp;amp;quot;&amp;amp;amp;gt;
Vue 4.0——整合font-awesome解决方案
无限迭代中......
02-23 1116
基本概念 font-awesome：提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 官网：https://fontawesome.com/ 非官方中文网：http://www.fontawesome.com.cn/ 解决方案 方法一：npm安装 1、安装 npm install font-awesome --save 2、引入 import ...
Vue cli3 引入 fontawesome 字体图标库
KamenRiderZerone的博客
07-28 495
1.cnpm install font-awesome --save 2.main.js中import"font-awesome/css/font-awesome.min.css"
Vue 第三方字体图标引入 Font Awesome
qq_27868533的博客
03-21 1万+
Font Awesome &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利，不管是在加载还是修改方面，字体图符远远优于图片。但是饿了吗封装的Element UI提供的字体图符少之又少，又不想用图片，只能自己扩展图符咯。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
css预处理 stylu的安装和使用
Gx422954766的博客
07-17 463
第一步：先安装node.js 下载链接：https://nodejs.org/en/#download 在第四步时选 Add to path 安装完成后在cmd中运行以下命令，查看是否安装成功 1.node -v    查看node.js的版本号 2.npm -v     查看npm的版本号 注意：此node.js已自带npm 在node.js中再创建2个文件夹 node_gl...
Vue-CLI创建项目详细指南
在项目目录中，运行： ```shell cd 项目名称 npm run serve ``` 或者 ```shell yarn serve ``` 这将启动一个热重载的本地开发服务器。 7. **构建与部署**：当你准备好部署到生产环境时，可以使用`npm run ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值