小程序使用iconfont自定义图标

最新推荐文章于 2023-03-07 18:16:36 发布
最新推荐文章于 2023-03-07 18:16:36 发布
阅读量715 收藏 1
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45295253/article/details/99054409
版权

小程序如何使用icon图标，很简单，首先进入阿里图标库，找到你所需要的图标加到项目中，然后下载到本地
下载iconfont
下载之后解压文件，目录如下
文件目录
然后利用transfonter解压成我们需要的base64的文件格式，
https://transfonter.org/
进入网站，添加需要加压的文件
在这里插入图片描述
添加刚下载的icon图标，找到 iconfont.ttf ，选择添加
在这里插入图片描述
添加之后打开base64转码，然后点击 convert 进行转码
在这里插入图片描述
成功之后下载文件，解压，这里我们只用到stylesheet.css文件
在这里插入图片描述
打开文件，复制出代码，将之前下载iconfont文件里的iconfont.css文件的第一段代码覆盖
在这里插入图片描述
覆盖前
覆盖后
最后将文件添加到项目中
在这里插入图片描述
接下来就可以在app.wxss文件引用正常使用图标啦
在这里插入图片描述
使用图标

z.week
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
自定义图标iconfont
weixin_43738272的博客
03-10 792
阿里iconfont的使用 ui切好图上传到蓝狐，我们下载svg格式的图片。 登陆iconfont官网 然后将自己取的iconfont的昵称也就是用户名给你们负责人说，叫他把你拉入图标管理库，这样才能共同开发，全部人各自定义自己的图标，不冲突。 被拉入库之后 hover导航栏的图标管理库点击我的项目 我参与的项目就是你们公司的项目 开始自定义icon 点击上传图标致项目 ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
最新发布
2401_84149505的博客
04-20 578
面试是一个不断学习、不断自我提升的过程，有机会还是出去面面，至少能想到查漏补缺效果，而且有些知识点，可能你自以为知道，但让你说，并不一定能说得很好。有些东西有压力才有动力，而学到的知识点，都是钱（因为技术人员大部分情况是根据你的能力来定级、来发薪水的），技多不压身。附上我的面试各大专题整理： 面试指南，满满的都是干货，希望对大家有帮助！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！整理： 面试指南，满满的都是干货，希望对大家有帮助！
uni-app 使用 iconfont 图标 自定义图标
CWW2016的博客
08-14 1382
uni-app 的uni-ui 的 Icon 图标组件，裡面的图标只是移动端常见的图标，对于一些其他需求所要显示的图标，这个是完全不够用。那么怎么办?模仿它的组件，用阿里巴巴图标矢量库的图标，自己定义一个图标组件呀。 一、uni-app 图标组件 1、组件文件m-icon里面有两个文件，一个是m-icon.css文件一个是m-icon.vue文件 2、m-icon.css...
iconfont图标_菜单栏使用自定义Icon （iconfont.cn）
weixin_39752828的博客
12-01 524
注 ：最新版本已经支持导入，参照增加IconFont组件、菜单图标可以使用自己的IconFont项目图标 by uv-w · Pull Request #3517 · ant-design/ant-design-pro​github.com直接将iconfont项目文件下载到项目中，比如 '/public'下面，然后在'src/defaultSettings.js中引入，例如"iconfontUr...
Vant 使用 iconfont 自定义图标
qq_33160523的博客
11-24 3072
vant官方文档 刚开始看官方文档不是很清楚，后面百度加上自己验证后才弄清楚使用方法 一、到iconfont下新建一个项目 https://www.iconfont.cn/ 这里的Font Family就是对应vant的class-prefix属性，FontClass/Symbol 前缀设为Font Family后面加上’- 二、把所需的图标加入的新建的项目 选择对应图标加入购物车 点击右上角购物车然后加入新建的项目 下载然后把文件夹解压复制到项目src/下某个目录，（demo.css和demo
iconfont添加新图标_添加自定义图标(iconfont)
weixin_36309193的博客
01-27 925
## 自定义icons的设置1. 介绍: 现在基于css font-face的字体图标越来越流行。这种图标具有矢量图的特点，可以不失真的自由缩放，还可以通过css来设置图标的颜色，还有就是网络上资源特别丰富。X5系统自带了数百个字体图标， 用户还可以通过配置使用自己下载的字体图标， 下边就介绍一下具体的使用方法。2. 首先以fortawesome 网站为例(网址：[http://fortaw...
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序中使用自定义图标（阿里icon）的方法
12-03
weui提供的图标比较少，有时我们需要更多的图标，可以使用以下方法自定义图标库： 1，到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标，下载代码，解压，打开iconfont.css 2，在wxss文件中引用字体 &...
使用iconfont图标
11-16
在iOS应用开发中，为了优化应用性能和减小IPA（应用程序包）的大小，开发者常常会采用`iconfont`（图标字体）技术来替代传统的图片切图。标题“使用iconfont图标”和描述中提到的方法，是将图标设计成字体形式，这样...
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
01-03
以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
iconfont，小程序彩色图标方案，小程序彩色iconfont生成工具.zip
09-30
在小程序中使用iconfont，可以提高页面加载速度，因为图标是以单一字体文件的形式加载，而不是多个图片资源。 彩色iconfont生成工具则是为了满足开发者对彩色图标的需要。传统iconfont通常以单色显示，但随着设计...
微信小程序实现自定义加载图标功能
10-18
主要介绍了微信小程序实现自定义加载图标功能，非常不错具有一定的参考借鉴价值，需要的朋友参考下吧
微信小程序开发常用的1600个PNG图标大全
02-13
微信小程序开发常用的1600个PNG图标大全
小程序图标导航
11-01
微信小程序图标分类导航，微信小程序开发必备源代码！
利用iconfont拓展（自定义）web项目图标
长安山南君的博客
04-03 983
拓展小图标下载iconfont图标压缩包开始在web项目中使用 下载iconfont图标压缩包 在iconfont上传自定义svg等格式的ui设计稿，或者下载别人的小图标。 添加到 库 ，进入项目 2. 下载到本地 开始在web项目中使用 解压得到关键的css文件 将该css文件引入到项目中。稍作修改。 2.1 css文件 @font-face { font-family: ...
三分钟教会你自制 iconFont 字体图标库
非著名程序猿
10-24 9592
app开发的时候，我们大多会用到字体icon，下面我们就讲解一下，如何自定义生成 iconFont 一般情况，我们优先选择在 Iconfont-阿里巴巴矢量图标库 下载我们需要的矢量icon的svg格式, 如果这里没有你需要的icon，也可以自己切图把png格式的图片转化为svg; svg 导入并生成 font 在线转换网址 导入多个svg图片 点击右下角 记好每个icon的code 然...
在微信小程序中引入自定义字体以及iconfont图标
爱与自由，一生所求
03-07 3937
一、微信小程序引入外部字体 1、找到字体包ttf、eot、svg、woff随便一种格式文件；文件转换网站：字体文件转换网站 2、上传2中的字体文件（最好是ttf文件）到https://transfonter.org/，选择base64 编吗 ，convert后下载. 3、跟components同级，新建一个style文件夹，里面放第二步转换完下载后的得到的那些后缀文件(eot,svg,tt...
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
weixin_60387745的博客
03-07 3787
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
钉钉小程序使用iconfont
dreamy_wx的博客
03-06 466
钉钉小程序使用iconfont
Vant UI中使用iconfont实现自定义图标
06-01
要在Vant UI中使用iconfont实现自定义图标，需要以下步骤： 1. 在iconfont官网上选择需要的图标，并下载对应的字体文件。 2. 将字体文件放置在项目中，通常可以在`src/assets/fonts`目录下创建一个新的子目录。 3. 在项目中引入字体文件，可以在`src/main.js`文件中使用`@font-face`来引入字体文件，例如： ```javascript @font-face { font-family: 'iconfont'; src: url('@/assets/fonts/iconfont.eot'); src: url('@/assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('@/assets/fonts/iconfont.woff2') format('woff2'), url('@/assets/fonts/iconfont.woff') format('woff'), url('@/assets/fonts/iconfont.ttf') format('truetype'), url('@/assets/fonts/iconfont.svg#iconfont') format('svg'); } ``` 4. 在组件中使用`van-icon`组件来显示自定义图标，需要将`name`属性设置为`iconfont`，并将`class`属性设置为`iconfont`和对应图标的类名，例如： ```vue <template> <van-icon class="iconfont icon-email" /> </template> <script> export default { name: 'MyComponent', }; </script> <style> .iconfont { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> ``` 通过以上步骤，就可以在Vant UI中使用iconfont实现自定义图标了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

z.week

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

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

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

打赏作者

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

抵扣说明：

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

余额充值