在小程序中使用iconfont

最新推荐文章于 2024-03-03 04:00:00 发布
最新推荐文章于 2024-03-03 04:00:00 发布
阅读量3.8k 收藏 3
点赞数
文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DargonWisdom/article/details/126271599
版权
在微信小程序中使用iconfont

在前端开发中，一定会用到iconfont，相对于图片来说，所占取的空间更加，更能节省性能

iconfont网址：

首先进入iconfont官网，输入你想要的图标

iconfont官网首页

找到你想要的iconfont图标，点击购物车，进行添加

将需要的iconfont加入到购物车中

然后点击右上角的购物车，将选中的iconfont添加到自己的项目文件夹中

添加至项目文件夹中

在左上角的资源管理中— 我的项目 进入我的项目中

我的项目界面

重点来了，现在就是引入了，引入方式为两种，一种是线下引入，一种是线上引入方式

线上引入
点击①中，先生成在线链接，同时要下载至本地，下载好的压缩包中，解压，然后将里面的iconfont.css的后缀改为wxss。并放到项目中
复制②中的代码，打开iconfont.wxss文件，替换掉如下图2中iconfont.wxss划线位置的代码，

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

线下的引用，不一样的是需要将下载好的iconfont中的压缩包中的iconfont.css，iconfont.woff，iconfont.woff2，iconfont.ttf都引入到项目中，不过还是得将iconfont.css的后缀改成wxss

最后无论线上还是线下都得在app.wxss中引用就可以了

线上的引用方式有一定可能的不稳定，但是引入的文件少。线下的引用方式稳定，但是需要比较多的文件
若是iconfot进行添加的话，线上的@face的代码得更新，线下的更换引入的文件

DargonWisdom
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
2401_84149505的博客
04-20 596
面试是一个不断学习、不断自我提升的过程，有机会还是出去面面，至少能想到查漏补缺效果，而且有些知识点，可能你自以为知道，但让你说，并不一定能说得很好。有些东西有压力才有动力，而学到的知识点，都是钱（因为技术人员大部分情况是根据你的能力来定级、来发薪水的），技多不压身。附上我的面试各大专题整理： 面试指南，满满的都是干货，希望对大家有帮助！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！整理： 面试指南，满满的都是干货，希望对大家有帮助！
小程序使用iconfont
kingAn123的博客
05-31 1912
文章目录vue项目使用iconfont一、小程序使用iconfont1. 找到创建的图标库2. 查看生成的样式文件在线链接3. 复制在线链接，直接用浏览器打开4. 小程序中引入iconfont5. 小程序使用iconfont6. 页面使用iconfont二、组件样式隔离导致iconfont无效三、在伪类选择器中使用iconfont1、iconfont作为伪类图标2、iconfont作图片缺省图 vue项目使用iconfont 使用iconfont图标样式库-CSDN 一、小程序使用iconfont 与
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
最新发布
时光の尘的博客
03-03 3626
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2369
略
微信小程序里使用iconfont
小蓝人的博客
07-28 948
3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face。注微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用。2、解压缩，将其中的.ttf字体格式文件进行转化。4、在app.wxss中引用iconfont。将iconfont.ttf字体文件上传，1、下载fontClass版图标。...
微信小程序中使用 iconfont 图标的四种方法
qq_43477721的博客
07-20 6099
1. 先去 iconfont 官网选择自己需要的图标，添加到项目中 点击红框 在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下 打开 app.wxss @import "iconfont.wxss" 现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。 第一种 <text class="iconfont icon-fabu"></text> 后面的名称可以在 i
3步在小程序中使用iconfont.md
03-29
从iconfont中下载iconfont源文件 http://iconfont.cn/ (此图片来源于网络，如有侵权，请联系删除! ) 我们加几个图标字体. 单色的. 多色的.,最后得到的图标 (此图片来源于网络，如有侵权，请联系删除! ) 将iconfont...
vue和小程序项目中使用iconfont的方法
10-15
主要介绍了vue中和小程序中使用iconfont的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
详解mpvue小程序中怎么引入iconfont字体图标
10-17
在引入了字体文件之后，我们就可以在小程序的页面中使用这些图标了。例如，如果你想显示一个名为"fangdajing"的图标，你可以这样写HTML代码： ```html <i class="iconfont icon-fangdajing"> ``` 这里，`iconfont`是...
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype...
原生微信小程序引入离线iconfont字体图标
qq_15064263的博客
08-17 616
原生微信小程序引入离线iconfont字体图标
【微信小程序使用单色及彩色阿里巴巴矢量图标库】
regretTAT的博客
05-24 639
微信小程序使用iconfont图标 单色以及彩色
微信小程序中如何使用阿里云iconfont图标
m0_62524243的博客
08-18 695
在小程序根目录创建iconfont.wxss文件，将浏览器中的代码复制，粘贴到文件中。在项目中，点击Font class按钮，点击查看在线链接，生成css文件。在iconfont中查看图标名称（可以自定义，瑶重新生成css文件）在app.wxss文件中引入iconfont.wxss文件。创建一个项目（进入我的项目，点击创建项目）在图标库中挑选自己需要的图标，点击购车按钮。将购物车中的图标添加到自己的项目中。选好后，点击右上角购物车 按钮。将复制的url在浏览器中打开。输入相关数据，创建项目。...
微信小程序引入iconfont
qq_44306615的博客
01-04 434
微信小程序使用iconfont
微信小程序----引入外部字体库iconfont的图标
热门推荐
止于至善
12-22 3万+
直接使用阿里巴巴的网络路径选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss@font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
微信小程序项目引入iconfont
Sakiaaa的博客
12-10 297
微信小程序项目引入iconfont 1.打开 iconfont官网，登录账号，找到想要的图标，鼠标移到它上面，点击最上方购物车添加入库： 2.头部购物车图标（从右往左数第三个）显示+1，表示入库成功，点击它查看详情 3.点击下方添加至项目栏 4.点击 加入项目 那一行最右边的文件夹，新建项目 4.项目命名，点击确定（图1），会自动进入项目（图2），点击font class下面的暂无代码，点此生成 图1： 图2： 5.点击生成的代码链接（图1），会自动打开新页面（图2），复制页面内所有的代码，打开
微信小程序引入 iconfont 图标
dark_cy的博客
06-20 738
　　下图的左上角有三种模式，Unicode、Font class 和 Symbol。选中 Font class 模式，然后点击【点击复制代码】下面的链接，将链接里面的代码（如图二）复制到项目里即可。 　　之前我都是用的 Font class 模式，但是上星期 iconfont 官网维护之后，我加了新图标更新代码的时候弹出了下面的提示，说要下载至本地使用。　　小程序上我还没用过本地的 iconfont 图标，于是我就去百度怎么引入，有些博客说小程序不支持加在本地字体文件，要转成 Base64 的格式引入才可以
微信小程序引入外部的CSS或iconfont
m0_73341533的博客
01-30 2855
iconfont作为一种特殊的CSS也逃不开这个命运，小程序的wxss文件font-face中的url不接受HTTP地址参数，但是接受base64，因此而我们可以将字体文件下载后转化为base64.将下载文件目录下.css文件直接修改成.wcss文件，放置到项目目录下，在开发者工具中打开，复制下面加在文件中。将第一步中下载的文件中iconfont.css用记事板打开复制选中代码。保存文件，就可以在需要地方引入文件了，在wxml中就可以使用图标了。)寻找需要的字体图标，并下载，在压缩包中找到ttf格式文件。
最新版微信小程序如何引入iconfont阿里矢量图库解决方案
明哥
03-03 2698
前言： 问题引发的原因来自最近在写微信小程序教学项目，项目中的一个图片是我随手切的,因为之前在Vue项目中一直在使用阿里矢量图库,我就想把阿里矢量图库ico图标集成到自己项目中,百度看了一些博客跟着做都引入不成功,研究了二十分钟弄出来,特此记录一下,同时作为参考文档供教学使用。 1、首先我们打开阿里矢量官网接着我们需要登录一下,如果没有账号这里可以使用微博注册登录一下,登录成功后,点击【资源管理-->>我的项目】接着我们点击【新建项目】填写【项目名称：这里随便...
uni小程序tabbar使用iconfont
06-13
要在uni小程序的tabbar中使用iconfont，可以按照以下步骤进行： 1. 在iconfont网站上选择需要的图标，添加到购物车中并下载。 2. 解压下载的压缩包，将其中的iconfont.ttf文件复制到uni小程序的static目录下。 3. 在uni小程序的App.vue文件中引入iconfont.css文件，可以通过以下代码实现： ``` <style> @font-face { font-family: 'iconfont'; src: url('./static/iconfont.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 28rpx; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> ``` 4. 在需要使用iconfont的页面的.vue文件中，使用以下代码引入需要的图标： ``` <template> <view> <text class="iconfont"></text> </view> </template> ``` 其中，``是iconfont图标的unicode码，可以在iconfont网站上找到对应的码值。 5. 在uni小程序的tabbar中使用iconfont，只需要将tabbar中的icon属性改为使用iconfont即可，例如： ``` <uni-tab-bar> <uni-tab-bar-item icon="iconfont"></uni-tab-bar-item> <uni-tab-bar-item icon="iconfont"></uni-tab-bar-item> <uni-tab-bar-item icon="iconfont"></uni-tab-bar-item> <uni-tab-bar-item icon="iconfont"></uni-tab-bar-item> </uni-tab-bar> ``` 这样就可以在uni小程序的tabbar中使用iconfont了。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值