uni-app中引入font-awesome

最新推荐文章于 2025-06-23 00:37:09 发布
最新推荐文章于 2025-06-23 00:37:09 发布
阅读量5.7k 收藏 3
点赞数
本文详细介绍了如何在微信小程序项目中正确安装和配置Font Awesome图标库，包括安装依赖、引入全局样式及解决运行时出现的404错误的方法。通过修改webpack配置文件并重新运行程序，确保Font Awesome能在小程序中正常显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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注释
在这里插入图片描述
之后再运行

npm run dev

在这里插入图片描述
3）组件使用方法

在这里插入图片描述

qq_32496215
关注
在Uni-app中使用自定义图标
祈澈菇凉
10-18 778
使用矢量图标字体或图标库来添加自定义图标。一些常见的方法：1：使用矢量图标字体:矢量图标字体库，如Font Awesome、Material Icons等。将矢量图标字体文件（通常是.ttf或.otf格式）添加到项目中。需要使用图标的地方，使用相应的类名来渲染图标。</style>添加自定义字体文件。用相应的类名来渲染图标。
Vue 第三方字体图标引入 Font Awesome的方法
10-17
今天小编就为大家分享一篇Vue 第三方字体图标引入 Font Awesome的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app 字体文件引入，小程序不支持问题解决
东明之羞的博客
07-25 4707
将第三方的字体文件进行 base64编码，之后创建 fontawesome.wxss solid.wxss 具体参考如下文章 如何编译字体文件为base64并引入到vue文件中
uniapp字体图标的使用
12-31
uniapp字体图标的使用
Uniapp——1.引入官方CSS样式
weixin_63215361的博客
06-23 231
将官方提供的UI库导入自己的项目中，若自己的项目里没有common目录，那就建一个common目录，并把官方提供的UI库粘贴进来。第四步：将UI库用@import引入App.vue中的样式中，用于适用于整个项目。：新建项目，选择官方提供的演示的项目，同时这个官方提供的新建项目也。打开官方提供的演示的项目文件中的common文件夹，这里面的。，我们复制这个UI库到我们自己的项目中。
在 uniapp 中使用 fontawesome
BlackParade的博客
07-20 2776
在 uniapp 中使用 fontawesome 包括导航栏和页面上
uniapp引入 FontAwesome
DemonDay01的博客
07-08 3465
uniapp引入 FontAwesome 首先在FontAwesome 官网下载 网址： http://www.fontawesome.com.cn/get-started/ 点击Download 将下载好的FontAwesome 文件拷贝到项目资源中，当然，现在还不可以使用。 现在要将FontAwesome 自带的 .ttf 后缀名 字体（woff格式的也可以）转换成base64格式 转换网址是这个：https://transfonter.org/ 找到项目中的FontAwesome 文件
uniapp使用npm命令引入font-awesome图标库最新版本并解决APP和小程序不显示图标的问题
小香菜子的博客
04-07 1781
报错：[渲染层网络层错误] Failed to load local font resource /assets/fa-brands-400.b7dee83c.ttf。图标库网址：https://fontawesome.com/search?这个方法在web端可以正常显示，但是在微信小程序和APP中不显示，解决完后会更新。原因：小程序解析不了ttf文件，需要将ttf文件转为base64文件。转换工具：https://transfonter.org/就可以在小程序上正常显示了。
UniApp转微信小程序之引入FontAwesome图标
qq_46797048的博客
10-19 891
解决微信小程序中无法使用FontAwesome图标问题，将ttf的文件转化为base64格式即可
uni-app批量引入字体图标
12-25
3. **配置路径**：在uni-app项目的`uni.config.js`文件中，设置assets目录，以便于找到字体文件。添加类似下面的内容： ```javascript module.exports = { // ... assetsDir: 'static', // 这里假设你的字体文件...
uni-app-wetchat
03-19
5. **字体与图标**：为了提供丰富的视觉效果，可能会使用网络字体服务（如 Google Fonts）或图标库（如 Font Awesome 或 uni-icons），通过 CSS 引入并设置相应的样式。 6. **性能优化**：在大型聊天应用中，避免一...
uni-app button加图标
最新发布
07-09
首先，用户的问题是：“uni-app button加图标”，意思是询问如何在uni-app中添加按钮图标。 我的回答需要： 1. 使用中文回答。 2. 回答完问题后，必须根据用户的问题及我的回答提出3-5个相关问题。 3. 相关问题必须...
Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档
04-16
使用该压缩包可以使Vue或uniapp使用luckysheet免费开发多人在线编辑Excel档 使用说明可打开链接https://blog.youkuaiyun.com/weixin_43416253/article/details/124211439?spm=1001.2014.3001.5502 或在论坛中搜索“Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档”里面有详细说明，如有疑问也可在文章下方留言
VUE使用‘luckysheet‘ is not defined已解决，其他博主方法没有解决请看这里
06-26
luckysheet源码包
uniapp引入font-awsome字体图标-疑难解决
weixin_30745553的博客
09-09 1277
1、下载font-awsome 2、放入uniapp项目的common目录（通常是放这个目录） 3、修改font-awsome.css中的字体路径为线上路径（可以是cdn的路径） 最主要的，就是这一步，H5可以使用本地路径，但是app和小程序中必须使用网络路径或者转base64格式或图片格式，否则图标就变成一个 × 。我用了自家公司的cdn中的文件路径。 修改后，文件夹里的字体图...
awesome字体图标库
weixin_45766034的博客
10-09 456
1.进入官网进行下载 2.真实项目中的目录 font-awesome.css是全局导入的 去网站挑选自己需要的图标,本地 即可
在uni-app中使用字体图标
热门推荐
尤朋的博客
05-29 1万+
首先去iconfont下载字体文件，就是下面这6个 在main.js中引入样式 在页面中直接通过样式类名使用 大功告成
uniapp开发项目引入字体图标
baidu_41899377的博客
07-20 728
1.交换两个变量的值 varapple1='青苹果'; varapple2='红苹果'; vartemp=''; temp=apple1; apple1=apple2; apple2=temp; console.log(apple1,apple2); ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值