uniapp 引入阿里iconfont图标并使用

最新推荐文章于 2024-08-31 08:30:00 发布
原创 最新推荐文章于 2024-08-31 08:30:00 发布 · 2.2k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何在uniapp项目中使用IconFont图标库。步骤包括：选择图标、添加到库、创建项目、复制css文件、生成代码并替换url，最后在所需页面导入使用。

网址：https://www.iconfont.cn/

1、找到需要的图标

在这里插入图片描述

2 添加到库

在这里插入图片描述

3在这里插入图片描述

4 添加到项目，没有项目的话要先建项目

在这里插入图片描述

5在这里插入图片描述

6、将css文件复制到uniapp项目中

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

7、生成代码，替换url

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

8、使用

在这里插入图片描述
在这里插入图片描述
在要使用的页面导入
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

rain__chen
关注
uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）
高桥留de博客
12-07 1419
uniapp正确引入本地iconfont（阿里图标库）
uniapp引入阿里巴巴矢量图标库
qq_60976312的博客
02-24 2216
uniapp引入阿里巴巴矢量图标库
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8562
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp 引入阿里字体图标iconfont
weixin_43877778的博客
10-21 2633
uniapp 引入阿里字体图标iconfont
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 3290
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uniapp使用阿里巴巴图标库教程
m0_71386778的博客
01-11 2414
回到官网我的项目中，在Unicode下点击【暂无代码，点此生成】，将生成的代码替换掉iconfont.css里上面的部分，到这里代码就可以正常运行了~到这里就可以使用阿里的图标库了，如果要添加图标就添加图添加到已有的项目中，下载重新覆盖文件即可。4、点击【项目设置】，勾选字体格式： WOFF2\WOFF\EOT\SVG\BASE64，点击【保存】，保存后点击【下载至本地】3、将购物车中的图标【添加至项目】，点击【新建项目】，填写项目名称后点击【确定】，会自动跳转至“我的项目”界面。
uniapp使用阿里图标
m0_55333789的博客
08-02 1713
uniapp使用阿里图标
uniapp引入阿里图标库
active_pig的博客
10-04 1797
平时项目开发肯定少不了图标的使用，除了自己定制图标库之外，再一个比较不错的就是使用阿里的图标库，这里包含了很多分类的图标，基本上你想用的图标它都有，不仅好看，使用起来也是非常方便的，下面一起来看看吧。你进入这个官网以后，挑选自己喜欢的图标后添加到自己的项目中，没有项目的随意建一个新的，新图标首先先加入购物车，然后到时候一块添加到项目中。这个就是图标的代码，每个不同的图标都不一样，这个可以自己尝试一下。官网地址：https://www.iconfont.cn/
【uniapp引入阿里字体图标】
ytfty24124的博客
10-28 714
nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
uniapp离线引入阿里巴巴图标
qq_39187822的博客
07-17 1432
【代码】uniapp离线引入阿里巴巴图标。
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4809
uniapp 使用阿里图标
uni-app引入阿里图标
monk96的博客
11-04 2414
今天刚好用uni-app在开发一个多端应用，在开始引用图标时不知道如何引入多端应用的图标，后来用阿里图标解决了，在此记录下解决的方法 去阿里图标官网下载阿里图标，选择unicode 2.复制代码，在app.vue粘贴，注意：将链接都加上https 3.在main.js中引入下载的字体文件，一般放在static下 4.在页面中引用 大功告成 ...
uniapp使用阿里icon详细步骤
qq_33444716的博客
03-30 4377
1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车，并且点击购物车，添加到相应的项目 2. 找到对应的icon项目，点击下载至本地 3.将红框框起来的文件放到项目中 4. 创建一个iconfont.css，做以下处理 @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('~@/static/font/iconfont.ttf') forma.
uniapp引入iconfont
qq_37953045的博客
07-27 957
uniapp引入iconfont
uni-app使用iconfont-字体图标
程序员劝退师的博客
08-06 2370
1.挑选需要的iconfont图标 阿里iconfont开源库 2.添加购物车 不亏是做电商的，这里也像购物一样！ 可以多选几个方便后面的测试效果！ 3.下载代码 4.解压文件 5.导入项目 创建static/font目录，将iconfont.css、iconfont.ttf导入到static目录中 6.修改iconfont.css文件 源文件 这时候编译会不通过！会提示svg、truetype、woff…找不到！那就将这几个去掉！ 其他几个报错的文件是没有引进来，那是其他平台兼容问题的，移动端
uni-app引入iconfont字体图标
Moon Star
11-15 833
script： mounted() { const domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { fontFamily: 'iconfont', src: "url('/static/mapIconfont/iconfont.ttf')" }); } template： <text class="iconfont">&#xe920;</text> styl
钉钉微应用iconfont在Android下图标找不到
xiasohuai的博客
05-10 720
低版本android他不支持woff2格式的字体,必须要使用woff格式字体,由于从默认iconfont网站上下载来的字体,woff2排在woff之前,所以导致android无法正确识别到woff了 @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1557465831153'); /* IE9 */ src: url('iconfont.eot?t=1557465831153#iefix') format('embedd
uniapp 使用阿里图标iconfont
weixin_44135909的博客
02-02 269
可以采用HBuilderX自带的颜色拾取器 复制该文件到static目录 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-duigou1"></use> </svg> 其中#icon-duigou1是自己复制symbol代码即可
UniaApp引入Iconfont
weixin_41562028的博客
08-31 924
官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。
uniapp引用线上iconfont图标库
最新发布
08-11
<think>根据用户需求，用户想在UniApp中引入线上Iconfont图标库。结合引用内容，以下是解决方案： 1. **获取线上Iconfont链接**： - 登录[阿里矢量图标库](https://www.iconfont.cn/)，选择项目，点击"查看在线链接"。 - 复制生成的`@font-face` CSS代码（注意：默认不带协议头，需手动添加`https:`）。 2. **创建/修改CSS文件**： - 在项目中创建CSS文件（如`iconfont.css`），粘贴复制的代码。 - **关键修改**：将URL前的`//`替换为`https://`（确保协议头正确）。 3. **全局引入CSS**： - 在`App.vue`中全局引入CSS文件： ```css @import url('https://at.alicdn.com/t/font_你的项目ID.css'); /* 直接使用线上链接 */ ``` 或 ```css @import './static/iconfont.css'; /* 若使用本地保存的CSS文件 */ ``` 4. **使用图标**： - 在组件中使用`<text>`或`<view>`标签添加图标类名： ```html <text class="iconfont icon-图标名称"></text> ``` **注意事项**： - **跨平台兼容性**：小程序要求使用HTTPS，且需避免本地字体文件（除非转Base64）。 - **字体重复问题**：若多项目共存，建议修改`font-family`名称避免冲突（引用[3]）。 - **性能优化**：字体文件>40KB时，建议使用线上链接（引用[1]）。 **示例代码**（引用[4]）： ```css /* iconfont.css */ @font-face { font-family: 'iconfont'; src: url('https://at.alicdn.com/t/font_4714252_hq913neoyz.woff2') format('woff2'), url('https://at.alicdn.com/t/font_4714252_hq913neoyz.woff') format('woff'), url('https://at.alicdn.com/t/font_4714252_hq913neoyz.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; } ``` §§相关问题§§ 1. 如何在UniApp中修改Iconfont的字体大小和颜色？ 2. 为什么小程序端Iconfont图标不显示？如何解决？ 3. 如何将Iconfont图标转换为Base64格式使用？</think>### UniApp 引入线上 Iconfont 图标库指南 在 UniApp 中使用线上阿里 Iconfont 图标库，需按照以下步骤操作（支持小程序、H5、App 三端）： #### 步骤 1：获取 Iconfont 线上链接 1. 登录[阿里矢量图标库](https://www.iconfont.cn/) 2. 选择项目 → 点击「查看在线链接」 3. 复制生成的 `@font-face` CSS 代码（示例）： ```css @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/c/font_4714252_hq913neoyz.woff2') format('woff2'), url('//at.alicdn.com/t/c/font_4714252_hq913neoyz.woff') format('woff'), url('//at.alicdn.com/t/c/font_4714252_hq913neoyz.ttf') format('truetype'); } ``` #### 步骤 2：创建 CSS 文件 1. 在 UniApp 项目中创建 `styles/iconfont.css` 2. **关键修改**：添加 HTTPS 协议头（小程序强制要求） ```css /* 修改后 */ @font-face { font-family: 'iconfont'; src: url('https://at.alicdn.com/t/c/font_4714252_hq913neoyz.woff2') format('woff2'), /* 添加 https: */ url('https://at.alicdn.com/t/c/font_4714252_hq913neoyz.woff') format('woff'), url('https://at.alicdn.com/t/c/font_4714252_hq913neoyz.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; -webkit-font-smoothing: antialiased; } /* 添加图标类（从 Iconfont 项目复制） */ .icon-home:before { content: "\e600"; } .icon-user:before { content: "\e601"; } ``` #### 步骤 3：全局引入 CSS 在 `App.vue` 中引入（确保所有页面可用）： ```vue <style> /* 全局引入 */ @import '@/styles/iconfont.css'; </style> ``` #### 步骤 4：使用图标 ```vue <template> <!-- 在页面中使用 --> <view class="iconfont icon-home"></view> <text class="iconfont icon-user"></text> </template> ``` #### 关键注意事项 1. **协议头必须为 HTTPS**：小程序要求所有网络资源使用 HTTPS[^1] 2. **字体名称冲突**：若多个字体都叫 `iconfont`，建议修改 `font-family` 名称避免冲突[^3] 3. **本地文件限制**：字体 >40KB 时 UniApp 不会自动转 Base64，建议直接使用线上链接[^1] 4. **小程序兼容性**：小程序不支持本地字体文件，必须使用线上链接[^2] #### 替代方案：Base64 嵌入 若需完全离线使用（字体 <40KB）： ```css @font-face { font-family: 'iconfont'; src: url('data:font/truetype;base64,<BASE64编码>') /* 从阿里下载后转换 */ } ``` > **提示**：每次在 Iconfont 更新图标后，需重新复制线上链接并更新 CSS 文件。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值