在微信小程序中使用iconfont

已于 2024-02-27 08:29:34 修改
阅读量157 收藏 3
点赞数 7
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
于 2024-02-26 09:56:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48235660/article/details/136291978
版权
iconfont网址

        iconfont-阿里巴巴矢量图标库

引入

        在线引入，在你需要的图标已被添加进来的前提下喔

        新建一个iconfont.wxss文件，将复制的代码放进去，在需要的地方引入这个文件，例如app.wxss内，全局就可使用了，也可局部引入。

显示icon

        将鼠标移到你想用的icon上会显示遮罩，点击复制代码

        你复制的是你选择的icon的名称，那么在项目代码里这样写-->

        将名称写在容器的class里，iconfont必写，文案固定；icon-erweima就是你选中icon的名称

<view class="iconfont icon-erweima"></view>

        即展示在你想要的地方啦

        

小人参Y
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序 如何引入外部字体库iconfont的图标
08-28
主要为大家详细介绍了微信小程序引入外部字体库iconfont图标的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } .icon
3步在小程序中使用iconfont.md
03-29
众所周知, 小程序的有一个1M大小的限制. 而优美的界面离不了各种图形. 如果将这些图形集成到小程序中. 其臃肿的体积是让微信官方不想接受的. 作为前端开发, 阿里给我早就了iconfont开源图标库. 那能不能把这些图标字体引入到小程序中. 让水火不容的AT来一次拥抱. 说干就干. 从iconfont中下载iconfont源文件 http://iconfont.cn/ (此图片来源于网络，如有侵权，请联系删除! ) 我们加几个图标字体. 单色的. 多色的.,最后得到的图标 (此图片来源于网络，如有侵权，请联系删除! ) 将iconfont资源下载到本地备用. 下载完压缩包内容如下. (此图片
如何在微信小程序中使用iconfont
weixin_33757609的博客
08-17 380
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题，当我们在小程序中使用iconfont官方推荐的方法插入字体时，我们总会得到一个打印机（滑稽）。那么如何在小程序中正确的使用iconfont呢? 一、 IconFont添加字体 使用GitHub或其他账号登录iconfont，将我们需要的字体添加购物车，然后再添加到新建的项目中。 二、 生...
【uniapp-微信小程序】如何在微信小程序中使用iconfont字体包
莫诺库诺的博客
09-12 1671
在这里介绍一种使用ttf转Base64的方法在项目中引入iconfont字体包的过程。
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 3564
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
微信小程序使用iconfont图标
weixin_48166795的博客
11-20 4883
在微信小程序中使用iconfont图标的方法
在小程序中使用iconfont
DargonWisdom的博客
08-10 3852
小程序使用iconfont的使用
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2093
略
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 6950
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了1.将想要的图标添加入库并下载代码：二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：推荐去 https://transfonter.org 转换1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
基于微信小程序实现类似滴滴拼车小程序源码分享
06-15
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
微信小程序使用 iconfont
前端挖掘机
03-11 518
base64。
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 2856
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序中iconfont的使用
weixin_46805497的博客
01-03 471
微信小程序中iconfont的使用
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
微信小程序中使用阿里字体图标
ss0xt的博客仓库
05-15 2万+
在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现。 为了美化微信小程序，可以适当的使用一些小图标，这样体验也更友好些，于是决定使用常用的字体图标。下载图标首先在阿里字体图标查找你所需要的图标，然后“添加入库”（类似加入购物车那种）添加至项目（没有项目选择新建项目） 选择unicode，点击“查看在线链接”复制里面的代码 点击“下载至本地”，解压压缩包编辑iconfont.
微信小程序中使用iconfont图标
coding...
10-29 7550
方案一： 利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。 具体做法： 1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~ 2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
解决微信小程序分享按钮不可用
最新发布
qq_45569925的博客
06-05 500
在微信小程序中点击胶囊按钮上的三个点，在弹出的对话框中的【分享给好友】【分享到朋友圈】按钮都属于不可用的状态，显示未设置。在每个需要此功能的页面都需要添加此代码，否则就不能进行使用。
uniapp微信小程序怎么修改iconfont图标大小
05-16
你可以通过以下方式修改 uniapp 微信小程序中 iconfont 图标的大小： 1. 在需要使用 iconfont 的页面中，在 `style` 标签内设置 `font-size` 属性： ```css .iconfont { font-size: 24rpx; } ``` 这里将 `font-size` 设置为 `24rpx`，你可以根据你的需求来调整大小。 2. 在需要使用 iconfont 的地方，使用 `text` 组件来渲染 iconfont，并设置 `class` 属性为你在步骤 1 中设置的类名： ```html <text class="iconfont"></text> ``` 这里使用了 `` 这个 unicode 字符来表示 iconfont 中的一个图标。你需要将它替换成你想要使用的图标对应的 unicode 字符。 通过以上步骤，你就可以在 uniapp 微信小程序中使用 iconfont 并修改其大小了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小人参Y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值