vue项目引用图标font-awesome提示错误

最新推荐文章于 2023-08-16 22:19:38 发布
最新推荐文章于 2023-08-16 22:19:38 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue 样式问题 文章标签： java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41371502/article/details/106729647
版权

vue引入font-awesome图标样式一直报错

如图：
在这里插入图片描述

“
提示安装：npm install --save font-awesome/scss/font-awesom
可以是安装之后还是报错。
”

原来搞错顺序了，要先安装命令。
然后在main.js文件中写入
import ‘font-awesome/css/font-awesome.min.css’
ps：在安装命令的时候不要在main.js文件中import

记录一下！

在开发的路上越走越远
关注
专栏目录
font-awesome.min.css
04-22
css字体应用下载，下载下来直接可以在HTML里面加载进来应用
vue中引入font-awesome报错
MySunshine07的博客
02-27 3129
npm install --save font-awesome    之后在main.js中这样引入 import 'font-awesome/css/font-awesome.css' 报错如下图   This dependency was not found: * font-awesome in ./src/main.js To install it, you can run...
nodejs 安装 font-awesome 失败
u014685642的博客
03-27 433
那啥，网上教程都有点白瞎，去官网看了看，然后结合百度，得到正确的安装方式 cnpm install font-awesome --save npm 安装方式是真的不好使
vue引入font awesome 及webpack打包后图标不显示的问题
halo1416的博客
05-23 2404
vue引入font awesome的方法： npm install font-awesome --save 然后在main.js 中：import 'font-awesome/css/font-awesome.css' 问题描述：打包后发现图标不显示 报错为font awesome的相关文件引用路径问题；这是由于打包的配置文件webpack conf.b...
vue-awesome-icon-picker:一个Vuejs图标选择器组件，可以轻松选择并使用FontAwesome 5 Icon
05-23
一个Vue.js图标选择器组件，可以轻松选择并使用FontAwesome 5 Icon。 目录 安装 使用npm安装 npm install --save @rightbraintechbd/vue-awesome-icon-picker 或通过cdn使用它 < script src =" ...
解决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的操作
10-14
总结来说，引入`font-awesome`到Vue CLI 3项目中主要涉及修改`package.json`、运行`npm install`、导入CSS样式到`main.js`，以及可能的CSS样式调整，以确保图标在不同组件中能正确显示。这个过程对于增强项目视觉...
让你在Vuepress中可以直接使用FontAwesome的图标
08-08
3. **创建自定义Vue组件**：在Vuepress的`src/components`目录下，创建一个名为`FontAwesome.vue`的文件，用于导入和注册Font Awesome图标： ```vue import { library } from '@fortawesome/fontawesome-...
Bootstrap+Font Awesome图标不显示 或显示错误解决办法
weixin_30670151的博客
09-05 413
网页使用了Bootstrap+Font Awesome ，发布后 图标不显示，通过浏览器工具 发现 缺少文件所致， 可到 http://fontawesome.io/ 下载字体包，解压缩后将 fonts 中文件拷入网站相应文件夹。 转载于:https://www.cnblogs.com/kkong/p/3957260.html...
fontawesome引入的时候，在页面上显示不成功，显示方块
m0_51047424的博客
03-21 1921
fontawesome引入的时候，在页面上显示不成功，显示方块
yarn add @fortawesome/Font Awesome-free 安装失败
zsysem的博客
10-28 684
使用 来作为字体图标库。Font Awesome 提供了可缩放的矢量图标，允许我们使用 CSS 所 提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 安装: $ yarn add @fortawesome/fontawesome-free 但是在win10失败了。 用以下方法解决： win10 系统的话，用下面命令安装成功： $ yarn add --dev @fortawesome/fontawesome-free --no-bin-links 然后 $ npm r
Vue项目启动报错This dependency was not found: * font-awesome/css/font-awesome.min.css in ./
TheYoungGirl的博客
06-27 686
This dependency was not found: * font-awesome/css/font-awesome.min.css in ./
vue 中引入font-awesome
聆听。。花开雨落的博客
05-31 1182
vue 中引入font-awesome 直接使用命令npm install font-awesome --save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了 入口js中引入 import 'font-awesome/css/font-awesome.min.css' 然后就可以使用了，例如下面这样 <i class="fa fa-book"></i> ...
webpack3解决font awesome找不到字体（webpack引入font awesome）
qssn的博客
05-10 1798
    看了N个网页都没解决，最后吧file loader的useRelativePath设置为true解决了。看了一下，该属性是生成一个相对 url ，难道之前打包的时候引入的都是绝对URL？这点求大佬指点。下面是引入font awesome的步骤。1.下载font awesome    这是废话。我用的是CSS2.引入font awesomeimport '../../font-awesome...
关于加载font-awesome文字显示不出来
aiacl7583的博客
04-11 942
关于font-awesome的网站 中文网：http://www.fontawesome.com.cn/get-started/ 官网：https://fontawesome.com/ 中文网4.7：http://www.bootcss.com/p/font-awesome/#icons-web-app 在导入font-awesome时加载却发现加载不出来图标和文字，无论是本地还...
font-awesome不显示以及字体样式的引入方式：
m0_66468899的博客
08-16 1110
2,使用时，不能只把css文件复制到自己的工程项目下，还需要把fonts文件夹一起复制过去【问题解决】然后，再复制图标名称，注意引入阿里图标名称到元素的class=“ ” 【加前缀 iconfont】选择自己需要的图标-》点“购物车”按钮去-》添加到项目（没有项目则随便起个项目名创建一个）（1）官网下载样式copy到自己的工程项目下link引入。-》复制生成的代码到<link href=" ">中，font-awesome不显示。，点击下载一下，就可以使用啦.“复制代码”即可获得图标名称，
解决： ERR! network request to https://registry.npmjs.org/@fortawesome%2fvue-fontawesome failed 问题
狮子座的男孩
06-09 5727
依赖，还是运行项目都发现报错：ERR!等的操作过程中，发现无论是装 element-plus。根据提示发现应该是网络的问题，后面看看能不能 ping。通，如果还是有问题，就考虑换下。等的问题(因为 node.js。站点在国外，而在国内一般是用。版本与 node-sass。
命令行 cnpm install 报错： Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7
热门推荐
不想成为可以改变世界的程序员，不是一个好程序员
05-21 3万+
命令行 cnpm install 报错： Install fail! Error: Unsupported URL Type: npm:vue-loader@^15.9.7 G:\Git\owl-read-admin>cnpm install × Install fail! Error: Unsupported URL Type: npm:vue-loader@^15.9.7
vue安装font-awesome
最新发布
12-07
以下是在Vue项目中安装font-awesome的步骤： 1. 在终端中使用npm安装font-awesome： ```shell npm install font-awesome --save ``` 2. 在main.js中引入font-awesome的css文件： ```javascript import 'font-awesome/css/font-awesome.css' ``` 3. 在需要font-awesome的组件中，使用font-awesome提供的icon名称即可，例如： ```html <template> <div> <i class="fa fa-user"></i> </div> </template> ``` 其中，`fa-user`是font-awesome提供的一个用户图标的名称。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值