微信小程序引入iconfont单色图标实例(Font class方式)

最新推荐文章于 2023-12-01 11:02:02 发布
最新推荐文章于 2023-12-01 11:02:02 发布
阅读量781 收藏 5
点赞数 1
分类专栏： iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gyueh/article/details/119786184
版权
  1. 进入https://www.iconfont.cn/官网，
  2. 搜索目标图标,图标类型为“单色图标”
    在这里插入图片描述
  3. 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中

在这里插入图片描述
4. 在小程序项目文件中建一个新的文件夹，命名为iconfont；
在这里插入图片描述
5. 在iconfont文件夹下新建一个wxss文件，并命名为iconfont.wxss
6. 回到iconfont网站，点击复制代码(j即:复制生成的CSS的链接地址)
在这里插入图片描述
7. 打开浏览器，输入上一步骤中的链接地址
在这里插入图片描述
8. 将网页中的内容复制到iconfont.wxss文件中
在这里插入图片描述
9.在小程序app.wxss中引入iconfont.wxss,如图
在这里插入图片描述
10. 在页面中使用,wxml部分代码如下：

<text class="iconfont icon-图标名"></text>

或者

<i class="iconfont icon-图标名"></i>

eg:<i class="iconfont icon-kache"></i>

  1. 最终效果如图
    在这里插入图片描述
  2. 修改图标颜色,wxss部分代码如下
<text class="iconfont icon-图标名" style="color: red;"></text>

效果图：
在这里插入图片描述

  1. 修改图标大小
<text class="iconfont icon-图标名" style="font-size:30px;"></text>

在这里插入图片描述

Qt开发经验总结
草上爬的博客
12-02 1万+
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
总结了一份Qt5 的开发经验
李肖遥的专栏
08-10 2181
关注、星标公众号，直达精彩内容来源：https://gitee.com/feiyangqingyun当编译发现大量错误的时候，从第一个看起，一个一个的解决，不要急着去看下一个错误，往往后面...
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 873
微信小程序引入 iconfont 矢量图标（Font class ）;
iconfont通过font class引入显示小方块bug
a1071626267的博客
09-29 1094
iconfont通过font class引入显示小方块bug
iconfont图标引入方法
DESERTo的博客
12-09 2170
iconfont细节使用
iconfont图标Font class使用
weixin_45866961的博客
05-11 256
阿里巴巴矢量图iconfont图标Font class使用
uniapp或者vue引入在线和离线阿里巴巴iconfont字体图标库
水月灯花的博客
11-09 4159
1、在线引入 在当前页面或者uniapp项目的app.vue文件中的全局style样式，导入在线地址，然后使用text标签引入，通过设置font-size可以设置显示大小。 首先将字体图标添加至购物车，然后点击购物车，随便选个项目进行添加。 然后点击更新代码将其生成后点击复制，注意选择font class 复制地址为任意vue文件的style标签中，复制的地址没有https标签，注意添加使用https 然后在vue的template模板中，使用text标签引入，开头添加iconfo..
Flutter实现微信底部图标渐变效果
"本文主要探讨如何在Flutter应用中实现类似微信底部导航栏图标的渐变效果，通过实例代码和详细步骤进行讲解，适用于学习和工作中遇到此类需求的开发者。" 在Flutter开发中，我们常常会遇到需要模仿其他成熟应用如...
MPAndroidChart常见设置属性（一）——应用层
热门推荐
行动者&&职业化
08-16 3万+
本文出自：http://blog.youkuaiyun.com/dt235201314/article/details/52222088 MPAndroidChart常见设置属性（一）——应用层 MPAndroidChart项目实战（一）——实现对比性柱状图 MPAndroidChart项目实战（二）——双平滑曲线（双折线图）和MarkView实现 MPAndroidChart项目实战（三）——饼状图实现和...
thinkphp 重构
王道长的技术博客
02-23 2422
thinkphp 模版 一、安装 composer require topthink/think-template 二、配置 在根目录下创建index.php入口文件测试： <?php namespace think; require __DIR__.'/vendor/autoload.php'; // 设置模板引擎参数 $config = [ // 模板文件目录 'view_path' => './template/', // 模板编译缓存目录（可写）
iconfont字体图标的使用方法之Font class--超简单
六耳石猴的博客
08-03 4991
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;
CSS之iconfont导入方式
weixin_53027472的博客
07-21 5316
本文章主要是使用iconfont的教程，html页面中如何引入阿里巴巴icon
阿里iconfont 无法改变图标颜色（fontclass，Unicode）
qq_41347187的博客
01-17 909
取消勾选彩色即可
微信小程序中使用iconfont(阿里矢量图标字体)
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
iconfont图标_小程序引用Iconfont 图标
weixin_39718890的博客
12-01 194
选择图标下载代码1.添加项目2.选择 Unicode3.下载代码4.解压文件5.拷贝iconfont.css到小程序目录注意:我这里用的是支付宝小程序做演示 所有吧css后缀改成了 acss 如果是微信小程序的话 改成对应的.wxss 就好了引用图标可以单页面引用 也可以全局引用 如果是全局引用的话 则在app.acss/app.wxss中 引用即可 下面演示单页面引用方法1.修改iconfont...
vue引入阿里图标库（iconfont）单色和彩色图标
weixin_34161083的博客
12-28 2802
使用组件库时，图标往往不能满足需求，所以我们常常需要用到第三方图标库。阿里图标库是我们的常客。有两种形式，一是单色，二是彩色的。 单色图标的引用 1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压 2、在项目src目录新建目录font，用于存放刚才下载解压的代码 3、在main.js导入iconfont.css文...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
weixin_30263277的博客
02-10 512
转载原文：https://www.cnblogs.com/goloving/p/8855794.html iconfont字体图标使用就不多说了，大致是几部： 1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压 2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码 3、在main.js导入iconfont.css文件 import '....
iconfont的三种引用方法
crsitin_spade的博客
09-07 6686
Hi，guys！ 虽然我好像不写VUE就没啥人看了，本来也没什么人看 但我还是不写VUE，hhhh 今天我们来看看iconfont的三种引入方法 首先我们先挑一个要用到的图片，添加图库 然后右上角的小车里就会有了你添加的东西 再把它添加进你的项目里 我们可以看到，下面有Unicode，Font class，Symbol三种方法，先记得更新下面的代码 第一种 Unicode 我们先用的一种，将他给的font-face全部复制到页面的样式中 <style> @font-face {
微信小程序如何引入iconfont.wxss，阿里云矢量图
a896532147的博客
09-22 713
意： 微信小程序不能直接引入，只能引入 base64 的 iconfont,所以这里要勾选Base64,不然引入到项目中将会无法显示。3，解压下载的文件并将文件名称为“iconfont.css”，的文件复制到项目中并修改文件后缀名为".wxss",如。全局引用在app.wxss中引入文件@import 'style/iconfont.wxss';为了在项目中使用方便，可进行修改前缀及font Family,点击保存，2，将项目需要的矢量图标加入到项目中，点击“下载至本地”
微信小程序引入iconfont
最新发布
12-29
### 如何在微信小程序中集成和配置 Iconfont 图标字体 #### 准备工作 为了能够在微信小程序项目里使用 Iconfont 的图标，首先需要注册账号并登录到 [Iconfont](https://www.iconfont.cn/) 平台，在线创建属于自己的图标的集合[^3]。 #### 获取图标代码 挑选好所需的图标之后，可以下载对应的 `iconfont.css` 文件以及获取用于嵌入页面的 `<text>` 标签语法。对于微信小程序而言，通常会采用本地化的方式加载这些资源而不是通过网络请求来提高性能[^2]。 #### 安装 mini-program-iconfont-cli 工具 考虑到直接操作文件可能带来的不便，推荐利用命令行工具 `mini-program-iconfont-cli` 来简化这个过程。安装该工具可以通过 npm 或者 yarn 实现： ```bash npm install -g mini-program-iconfont-cli ``` 或者 ```bash yarn global add mini-program-iconfont-cli ``` 此工具能够帮助开发者更方便地管理 iconfont 字体文件，并将其适配至微信小程序环境之中[^1]。 #### 配置与应用 完成上述准备工作后，按照以下步骤继续设置： - 将下载得到的 `.ttf`, `.woff` 等格式的字体文件放置于项目的合适位置； - 修改 app.wxss 或 page.wxss 中的相关样式表规则以引用这些字体文件； - 在 WXML 页面结构内适当的位置加入形如 `<text class="iconfont icon-xxx"></text>` 的标签实例； 具体来说，可以在全局或局部 CSS 文件中添加如下定义以便正确显示图标字符： ```css @font-face { font-family: 'iconfont'; src: url('/path/to/iconfont.ttf') format('truetype'); } .iconfont { font-family:"iconfont" !important; } ``` 最后一步就是确保所使用的类名（即这里的 "icon-xxx"）匹配实际上传至 Iconfont 上面的名字空间了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值