前言

最近在接手一个微信小程序,发现里面的图标都是使用的image组件,看起来非常别扭,加载也不太顺畅。

就想着看看微信有没有类似自带的图标库可以使用。

有是有,就是太少了,翻来翻去好像也就 8 种,不太够用啊。

官方没有就只能自己做了,还是阿里的iconfont好使,首先你得有iconfont的账号。

1、将你心仪的图标加入购物车

2、将图标添加至项目

点击右上角倒数第三个图标进入购物车,然后将购物车添加到我们的项目中,没有项目可以自行创建。

3、我的项目

进入到我的项目可以看到我们刚刚加入的图标,我的项目在最上方的资源管理 — 我的项目。

4、将项目下载至本地

解压后你会看到如下文件

5、将字体转换为base64

进入网站:https://transfonter.org/ ,找到文件中的 iconfont.ttf 字体文件,将字体文件转换为 base64。

记得开启第2步的 Base64 encode

下载并解压后你将会获得如下的文件

6、样式文件修改

同时打开第 4 步下载解压的 iconfont.css文件和第 5 步,下载解压的stylesheet.css文件。

我们先看confont.css文件,红圈中的代码直接删除

再打开stylesheet.css文件,将红圈中的代码复制到confont.css文件中去

7、重命名

confont.css重命名为 xxx.wxss,并放到微信小程序项目中去,注意:后缀必须是wxss

8、导入样式文件并使用

app.wxss中导入我们的 xxx.wxss,我们生成的 icon 图标就可以在项目中使用了。

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

至此,我们自定义的Icon图标就制作完成了

微信小程序,制作属于自己的Icon图标的更多相关文章

  1. 微信小程序如何添加新的icon图标

    第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件复制到项目中,更改后缀为wxss 第 ...

  2. 微信小程序把玩(十一)icon组件

    原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon t ...

  3. 微信小程序制作家庭记账本之一

    制作的第一天,思索着制作手机端APP还是微信小程序,首先是想到制作APP但是各种收费让我不得不换一条路,所以开始制作小程序,下载了微信小程序开发工具,试着学习制作方法,但是似乎没有成效,但我坚信要一步 ...

  4. 微信小程序制作个人简历

    使用微信小程序云开发制作自己的个人简历,简单高效. 首先需要了解小程序的基本结构以及云开发模式,及一些css样式基础. 使用小程序云数据库.vant组件库实现简历内容. 最终效果如下: 首先申请个人微 ...

  5. 微信小程序制作日常生活首页

    1.手机上效果预览 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 2.开发者工具效果图 3.真机调试 4.项目的目录结构 5.核心代码 5.1 app.json ...

  6. 微信小程序框架分析小练手(二)——天气微信小程序制作

    简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...

  7. 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题

    今天在做微信小程序的时候遇到这个这样的问题  需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖  ,要怎么解决这个问题  我去翻了下小程序的文档 有个cover ...

  8. 微信小程序-制作简易豆瓣笔记

    demo截图: 图书:      电影:        共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...

  9. 微信小程序制作家庭记账本之五

    第五天,开发进度没有进行,不知道该如何下手完成小程序的开发.

  10. 如何使用微信小程序制作banner轮播图?

    在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...

随机推荐

  1. mysql使用group by分组时出现错误ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause and

    问题: 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column ...

  2. TypeError: put() missing 1 required positional argument: 'item'问题分析

    今天博主在练习带参数线程池的时候与到了如下问题: 翻译过来,就是缺少位置参数. 一.错误1 如果此时你的代码高亮是这样: 解决办法:在init魔法方法下的Queue没有加括号,即 self.q = Q ...

  3. Java 程序性能问题

    ● 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: 第一,控制资源的使用,通过线程同步 ...

  4. .net Core 调用EF Core 爬坑

    .net Core 中调用 EF Core项目 首先得建一个类库供.net Core 的主项目引用:其次,在.net Core 中做注入:最后,在页面中调用 1.类库项目中的操作 1.新建类库项目 2 ...

  5. 6月12日 python学习总结 框架

    1. 登录功能的实现 1. form表单提交数据的注意事项: 1. 是form不是from,必须要有method和action 2. 所有获取用户输入的表单标签要放在form表单里面,表单标签必须要有 ...

  6. python psutila模块

    #!/usr/bin/env python #coding:utf-8 # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 import ...

  7. 绕过WAF进行常见Web漏洞利用

    前言 本文以最新版安全狗为例,总结一下我个人掌握的一些绕过WAF进行常见WEB漏洞利用的方法. PS:本文仅用于技术研究与讨论,严禁用于任何非法用途,违者后果自负,作者与平台不承担任何责任 PPS:本 ...

  8. ElasticSearch7.3 学习之定制动态映射(dynamic mapping)

    1.dynamic mapping ElasticSearch中有一个非常重要的特性--动态映射,即索引文档前不需要创建索引.类型等信息,在索引的同时会自动完成索引.类型.映射的创建. 当ES在文档中 ...

  9. Nacos配置中心集群原理及源码分析

    Nacos作为配置中心,必然需要保证服务节点的高可用性,那么Nacos是如何实现集群的呢? 下面这个图,表示Nacos集群的部署图. Nacos集群工作原理 Nacos作为配置中心的集群结构中,是一种 ...

  10. 什么是B树(B-树)?

    写在开头:B-树,就是B树.因B树的英文名称为B-tree ,B-树因此而来,有人会误以为B-树是一种树,而B树又是另外一种树.实际上,B-tree就是指的B树. 而且B-树不可以读成B减树... 一 ...