uniapp开发移动端（包括小程序）引入iconfont字体库，使用方法

最新推荐文章于 2024-05-31 19:52:03 发布

zhuà!

最新推荐文章于 2024-05-31 19:52:03 发布

阅读量828

点赞数 4

文章标签： uni-app 小程序

本文链接：https://blog.csdn.net/m0_51430102/article/details/136232808

版权

以下是我个人的用法：

1.选择需要的图标放在自己的项目中，选择 unicode这个格式，并下载到本地

在这里插入图片描述

这个就是下载下来的文件

在这里插入图片描述

2.下载后选择这2个文件复制到项目中

在这里插入图片描述

3. 删除 @font-face中多余的url,保留一个ttf文件的引用就行，注意ttf在你项目中的路径（绝对路径）

在这里插入图片描述

4. 在页面中使用，

// class中iconfont是必须的，加上这个才会有iconfont样式
<i class="iconfont">看iconfont网站你对应的 unicode 图标的名称复制过来</i>

在这里插入图片描述

结果

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhuà!

关注关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
uniapp开发移动端（包括小程序）引入iconfont字体库，使用方法

uniapp iconfont字体库微信小程序
复制链接

扫一扫

微信小程序 如何引入外部字体库iconfont的图标

08-28

主要为大家详细介绍了微信小程序引入外部字体库iconfont图标的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

详解mpvue小程序中怎么引入iconfont字体图标

10-17

在开发基于mpvue框架的小程序时，引入iconfont字体图标是一项常见的需求，因为这样可以方便地使用丰富的矢量图标资源。下面将详细讲解如何在mpvue小程序中引入iconfont字体图标。首先，我们需要访问阿里巴巴矢量...

参与评论您还未登录，请先登录后发表或查看评论

【教程】微信小程序导入外部字体详细流程

WHY的博客

09-18

3765

本文介绍了如何在微信小程序中导入外部字体，包括字体导入API的使用以及字体资源在服务器上的部署和访问等内容

【微信小程序】使用外部字体

Qianmoer的博客

01-26

456

将所有内容复制到app.wxss中,接下来我们就可以在小程序中任意使用我们导入的外部字体了，另外此中方法也适用于阿里巴巴iconfont字体的导入哦，有兴趣的朋友不妨去试试。在修改的过程中又留下了一些什么坑，当然本文并不旨在谈论这些坑和其解决方案，因为太多了，本文的重点是如何在小程序中使用外部字体。微信小程序其实说白了就是一个浏览器，一个基于webkit内核的浏览器，我们浏览特定的小程序其实就是在浏览特定的网页。答案当然是可以的，我们需要借助一个第三方网站。其实对于一般的需求，系统预置的字体已经够用了。

uniapp 添加字体ttf

最新发布

tengyuxin的博客

05-31

770

在uniapp中使用字体，一共分成两种情况，一种是普通vue页面，一种是nvue页面引入字体。。

在uni-app使用iconfont中的图标

码农键盘上的梦

04-15

2884

1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:

uni-app 小程序引入字体图标

qq_18314469的博客

06-04

2429

我的项目引入的是阿里巴巴的图标库。将下载的阿里巴巴图标库中的 iconfont.css 文件，复制到项目的 commoncss文件夹下面，如下所示，可以修改一下文件名：然后修改该文件夹中的内容，由于文件中引用到的其它文件在项目中都不存在，可直接删除掉，只留下 “data” 开头的路径，如下图红线部分：注意：路径最后只剩下一个，这行代码的结尾一定是 “ ; ” (封号，载过坑) ...

【React】在移动端使用iconfont图标库

Handsome_gir的博客

12-12

635

如果有项目可以直接选择需要添加的项目，没有的需要新建项目存放到项目中。5、在react项目中，打开public/index.html。4、确定之后进入我的项目中，选择Symbol，点击复制代码。2、点击右上角的购物车，将购物里的图标添加到项目中。3、点击添加项目就会有选择的项目，选择后保存。1、首先将需要的图标加入购物车。6、使用iconfont图标。

uniapp微信小程序引入字体

努力、拼搏、奋进

11-29

2295

uniapp微信小程序引入字体

uniapp引入第三方字体库如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案

@微你

01-10

3040

uniapp 开发小程序时怎么样使用第三方字体库（比如宋体、楷体等）呢

基于uniapp设计的微信小程序源码.zip

05-27

这个标题揭示了我们要讨论的主题——一个使用uniapp框架开发的微信小程序的源代码。uniapp是一个跨平台的开发工具，它允许开发者用一套代码同时构建iOS、Android、H5、微信小程序等多个平台的应用。这里我们关注的是...

uniapp使用第三方字体

qq_43024468的博客

02-27

809

uniapp引入使用第三方字体

uniapp微信小程序使用自定义字体和外部字体

weixin_50755029的博客

10-26

4066

微信小程序使用自己喜欢的字体~~~

uniapp 中使用不同字体

热门推荐

唐僧的专栏

04-19

1万+

官方文档 uniapp 字体展示效果 : uniapp 多种字体的显示 H5网页 Android IOS uni.loadFontFace({ family: 'Bitstream Vera Serif Bold', source: 'url("https://sungd.github.io/Pacifico.ttf")', success() { console.log('success') } }) （官方）注意: 引入中文字体，体积过大时会发生错...

uniapp微信小程序项目引入字体图标

weixin_64630359的博客

03-21

476

【代码】uniapp微信小程序项目引入字体图标。

uniapp字体图标的使用

qq_59076775的博客

02-28

5633

前言:今天和大家分享一个uniapp字体图标的使用方法，对于一个刚步入uniapp的小白来说,请多指教。一.先从字体图标库下载对应的字体图标下载完成之后得到一个文件夹,保留以css结尾和ttf结尾的两项二.利用HBuilder创建一个项目 1.用模板创建好项目 2.在根路径下创建common，并放入.css和.tff的文件 3.删除一些无关的文件 1.common.vue 2.一些路径的配置在pages.json里面会自动生成 4.在iconf...

UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）

weixin_53221528的博客

12-28

780

UniApp小程序引入iconfont字体图标（阿里巴巴矢量图标库）

在uniapp中字体包的导入

m0_48893127的博客

09-12

1982

字体包的导入和使用

uni-app 导航栏使用iconfont 字体图标（unicode引用方式）

2401_84139728的博客

04-18

586

从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件，新建一个专门存放文件夹。

uniapp使用iconfont字体库

05-25

是的，UniApp可以使用iconfont字体库。您可以按照以下步骤进行操作： 1. 打开iconfont官网，选择您需要的图标，加入购物车并下载。 2. 解压下载的文件，将其中的iconfont.ttf文件放到项目的static文件夹中。 3. 在App.vue或main.js中引用iconfont.ttf文件，示例如下： ``` // App.vue <style lang="scss"> @font-face { font-family: 'iconfont'; src: url('./static/iconfont.ttf') format('truetype'); } .iconfont { font-family:"iconfont" !important; font-size: 16px; font-style: normal; } </style> ``` 4. 在需要使用图标的地方，使用<i>标签并添加对应的类名，示例如下： ``` <i class="iconfont"></i> ``` 其中，类名为“iconfont”，图标代码为“”。注意：如果您在下载图标时选择了其他格式的文件，例如SVG或PNG，需要将文件转换为字体文件后才能在UniApp中使用。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交