微信小程序中iconfont的使用

最新推荐文章于 2024-03-11 09:29:08 发布
最新推荐文章于 2024-03-11 09:29:08 发布
阅读量200 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43238931/article/details/112751047
版权
阿里巴巴矢量图标在微信小程序中的使用方法：

阿里巴巴矢量图库入口>> https://www.iconfont.cn/

搜索自己想要的图标，点击加入库
在这里插入图片描述
在这个地方创建、添加至项目中
在这里插入图片描述
复制Unicode中的代码
在这里插入图片描述
点击下载至本地
在这里插入图片描述
将下载的文件解压，打开iconfont.css
将下面部分内容删除，粘贴上刚才复制的内容
在这里插入图片描述
将该文件的内容复制到全局文件app.wxss中
在这里插入图片描述
icon的使用方式是：

<icon class="icon icon-saoma"></icon>

icon-saoma是icon的名字，可以点击Font class找到
在这里插入图片描述

昵称已存在lxttttt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 4010
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序中使用 iconfont 图标的四种方法
qq_43477721的博客
07-20 6261
1. 先去 iconfont 官网选择自己需要的图标，添加到项目中 点击红框 在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下 打开 app.wxss @import "iconfont.wxss" 现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。 第一种 <text class="iconfont icon-fabu"></text> 后面的名称可以在 i
在小程序中使用iconfont
DargonWisdom的博客
08-10 3876
小程序使用iconfont的使用
微信小程序里使用iconfont
小蓝人的博客
07-28 951
3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face。注微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用。2、解压缩，将其中的.ttf字体格式文件进行转化。4、在app.wxss中引用iconfont。将iconfont.ttf字体文件上传，1、下载fontClass版图标。...
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 686
微信小程序引入 iconfont 矢量图标（Font class ）;
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype...
微信小程序icon组件使用详解
08-28
本文将深入探讨微信小程序中的`icon`组件的使用方法，帮助开发者更好地理解和应用这一组件。 1. 原生`icon`组件： 微信小程序提供了原生的`icon`组件，用于展示系统提供的预定义图标。在WXML模板中，你可以通过以下...
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序 如何引入外部字体库iconfont的图标
08-28
在微信小程序中引入外部字体库，特别是像Iconfont这样的图标库，可以极大地丰富小程序的图形元素，提升用户体验。本文将详细介绍如何在微信小程序中引入并使用Iconfont图标。 首先，你需要访问阿里巴巴矢量字体库...
微信小程序使用 iconfont
最新发布
前端挖掘机
03-11 631
base64。
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2460
略
Linux常用命令
tian_tian2
07-07 311
Linux常用命令 一、文件/文件夹管理  ls 列出当前目录文件（不包括隐含文件）  ls -a 列出当前目录文件（包括隐含文件）  ls -l 列出当前目录下文件的详细信息  ls -lrt l表示显示详细列表，-t表示按时间排序,-r反向排序 cd .. 回当前目录的上一级目录  cd - 回上一次所在的目录  cd ~ 或 cd 回当前用户的宿主目录  创建文件夹 mkdir aaa
手把手教你 iconfont 导入使用及相关配置
Brod-Roy的博客
12-12 8954
iconfont是阿里旗下的一套图标库，UI设计师设计号图标后，会将图标上传到iconfont的项目库中。前端开发人员需要下载项目图标，并在项目中使用。
uni-app自定义导航按钮
浪子四方
11-27 1305
1 使用步骤 1.1下载阿里矢量图标 https://www.iconfont.cn/ 1.2 通过下载解压后的iconfont.css文件查看content，如 .icon-saoma:before { content: "\e6cb"; } 1.3 将字体图标引入项目 把解压后的iconfont.ttf文件复制到项目中，比如放在static目录下 1.4 配置自定义...
微信小程序中使用iconfont(阿里矢量图标字体)
热门推荐
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
使用elementui组件，iconfont图标
我的博客
06-16 444
FontClass/Symbol前缀：elementui组件中自带的icon 都是el-icon-开头，避开这个名字就行 font Familiy：这个是icon的类名
vue-manage-system 后台管理系统开发总结
林鑫
09-12 7410
前言 vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板，从2016年年底第一个commit，到现在差不多两年了，GitHub上也有了 5k star，也是这些让我有了持续更新的动力，其中也踩了很多坑，在这总结一下。 github地址：vue-manage-system 线上地址：blog.gdfengshuo.com/example/...
iconfont的使用（超详细步骤）
qq_45549336的博客
08-04 1万+
目录方法一方法二 方法一  注册iconfont账号  在图标库里面选自己喜欢的，加入购物车之后，添加到项目  下载到本地，并解压  这里我们只需要下面勾选的文件，其他都没用  下面是使用方法，我是用一个test文件夹来演示，大家可以一模一样改成vue中使用。  在test文件夹中，是这样的结构。注意，字体文件必须放在iconfont文件夹里面，iconfont这个文件夹不要改其他名字  在html中引入iconfont.css文件 <!DOCTYPE html> <head&
微信小程序使用iconfont图标
q1004124842的博客
04-28 653
图标的下载和平时一致,主要区别是在使用的时候 1. 引用的路径需要根据文件地址引入 2. 需要对woff文件做转换,转换网站https://transfonter.org/, 开启base64转换 @font-face { font-family: "iconfont"; /* Project id 1183980 */ /* 引用的路径也需要做修改 */ src: url('/style/iconfont.woff2?t=1651111039226') format('
微信小程序使用iconfont
05-21
2. 在微信小程序开发工具中创建一个iconfont目录，将下载的图标文件拷贝到该目录下。 3. 在需要使用图标的页面的json文件中引入iconfont.wxss文件。示例代码如下： ``` { "usingComponents": {}, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值