微信小程序,制作属于自己的Icon图标
前言
最近在接手一个微信小程序,发现里面的图标都是使用的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图标的更多相关文章
- 微信小程序如何添加新的icon图标
第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件复制到项目中,更改后缀为wxss 第 ...
- 微信小程序把玩(十一)icon组件
原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon t ...
- 微信小程序制作家庭记账本之一
制作的第一天,思索着制作手机端APP还是微信小程序,首先是想到制作APP但是各种收费让我不得不换一条路,所以开始制作小程序,下载了微信小程序开发工具,试着学习制作方法,但是似乎没有成效,但我坚信要一步 ...
- 微信小程序制作个人简历
使用微信小程序云开发制作自己的个人简历,简单高效. 首先需要了解小程序的基本结构以及云开发模式,及一些css样式基础. 使用小程序云数据库.vant组件库实现简历内容. 最终效果如下: 首先申请个人微 ...
- 微信小程序制作日常生活首页
1.手机上效果预览 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 2.开发者工具效果图 3.真机调试 4.项目的目录结构 5.核心代码 5.1 app.json ...
- 微信小程序框架分析小练手(二)——天气微信小程序制作
简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...
- 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题
今天在做微信小程序的时候遇到这个这样的问题 需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖 ,要怎么解决这个问题 我去翻了下小程序的文档 有个cover ...
- 微信小程序-制作简易豆瓣笔记
demo截图: 图书: 电影: 共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...
- 微信小程序制作家庭记账本之五
第五天,开发进度没有进行,不知道该如何下手完成小程序的开发.
- 如何使用微信小程序制作banner轮播图?
在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...
随机推荐
- 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 ...
- TypeError: put() missing 1 required positional argument: 'item'问题分析
今天博主在练习带参数线程池的时候与到了如下问题: 翻译过来,就是缺少位置参数. 一.错误1 如果此时你的代码高亮是这样: 解决办法:在init魔法方法下的Queue没有加括号,即 self.q = Q ...
- Java 程序性能问题
● 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: 第一,控制资源的使用,通过线程同步 ...
- .net Core 调用EF Core 爬坑
.net Core 中调用 EF Core项目 首先得建一个类库供.net Core 的主项目引用:其次,在.net Core 中做注入:最后,在页面中调用 1.类库项目中的操作 1.新建类库项目 2 ...
- 6月12日 python学习总结 框架
1. 登录功能的实现 1. form表单提交数据的注意事项: 1. 是form不是from,必须要有method和action 2. 所有获取用户输入的表单标签要放在form表单里面,表单标签必须要有 ...
- python psutila模块
#!/usr/bin/env python #coding:utf-8 # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 import ...
- 绕过WAF进行常见Web漏洞利用
前言 本文以最新版安全狗为例,总结一下我个人掌握的一些绕过WAF进行常见WEB漏洞利用的方法. PS:本文仅用于技术研究与讨论,严禁用于任何非法用途,违者后果自负,作者与平台不承担任何责任 PPS:本 ...
- ElasticSearch7.3 学习之定制动态映射(dynamic mapping)
1.dynamic mapping ElasticSearch中有一个非常重要的特性--动态映射,即索引文档前不需要创建索引.类型等信息,在索引的同时会自动完成索引.类型.映射的创建. 当ES在文档中 ...
- Nacos配置中心集群原理及源码分析
Nacos作为配置中心,必然需要保证服务节点的高可用性,那么Nacos是如何实现集群的呢? 下面这个图,表示Nacos集群的部署图. Nacos集群工作原理 Nacos作为配置中心的集群结构中,是一种 ...
- 什么是B树(B-树)?
写在开头:B-树,就是B树.因B树的英文名称为B-tree ,B-树因此而来,有人会误以为B-树是一种树,而B树又是另外一种树.实际上,B-tree就是指的B树. 而且B-树不可以读成B减树... 一 ...