微信小程序使用阿里巴巴图标库(外链式)-程序员宅基地

由于小程序的前端代码大小最大只有2M，无疑逼着我们按照小程序的规范，把尽可能的图片都放在远程服务器上，即使用网络图片而非本地图片（本地图片的大小会算在打包程序大小内）。一般的数据图片还好，不用说我们都会放在服务器上，但是对于一些图标就比较头疼了，尤其是一些没有ui而是自己寻找图片当图标的程序员们，图标不合规范就算了，大小还很大，这里有个不错的图标库而且还免费，那就是阿里巴巴图标库了。地址在这里：https://www.iconfont.cn/home/index

接下来废话不多说，看看怎么用

一登录并创建我的项目

登录不用多说，三种方式，估计一般人只有新浪账号，好一点的有github账号，第三种就流弊了，随便选一个进入。

然后选择上方的 “图标管理” -> “我的项目”

这里你会发现你的项目是空的，不要急，点击右侧的右边文件夹创建项目，然后填写内容，内容随便了，都无关紧要

二选择图标添加至项目

这接下来就看你需要什么样的图标了，然后选择添加入库

然后点击右上角的购物车图标，选择添加至项目

然后你就发现你的项目里就有你刚刚添加的图标了，请忽略其他我以前添加过的图标

三下载图标样式文件并放入到微信小程序

下载解压后，把其中的iconfont.css文件放入到你的小程序项目里，并把.css后缀名改成.wxss

但是到目前位置还是引入本地的资源，所以选择外链方式怎么做呢，接着往下看

四复制在线链接代码修改iconfont.wxss

回到项目管理中，点击unicode,并复制代码

然后覆盖刚刚拷贝到小程序里的iconfont.wxss文件里，替换@font-face的内容

即这里换成你刚刚复制的代码

四引入样式并在控件里使用

在你这个页面的wxss中引入，比如你是a.wxml中使用，那么就在a.wxss中第一行加入这个代码，引入

然后在a.wxml页面文件中就可以这样使用了

其中iconfont是固定前缀，后面的shanchu即是你iconfont.wxss底下的具体哪个图标的代码

至此就结束了，后面如果再添加图标，依旧到项目管理里，里面会提示你点击更新代码，继续按照上面的步骤即可

此外注意：

如果要修改图标的大小和颜色，可以自定义个选择器，大小用font-size,颜色用color即可

本人个人原创，如有雷同，纯属巧合，或者与本人联系，做改动。请转载或者CV组合标明出处，谢谢！（如有疑问或错误欢迎指出，本人QQ:752231513）

本文链接：https://blog.csdn.net/qq_30548105/article/details/107294285

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【编程态度】20个写代码的不规范案例_代码案例_程序源日志的博客-程序员宅基地

今天跟大家聊一个有趣的话题：如何写出让人抓狂的代码？大家看到这个标题，第一印象觉得这篇文章可能是一篇水文。但我很负责的告诉你，它是一篇有很多干货的技术文。曾几何时，你在阅读别人代码的时候，有没有抓狂，想生气，想发火的时候？今天就跟大家一起聊聊，这20种我看了会抓狂的代码，看看你中招了没？_代码案例

DevExpressWinForm DiagramControl组织结构图自定义生成数据并展示_devexpress diagramorgchartcontroller1.datasource_电网桌面软件开发的博客-程序员宅基地

DevExpressWinForm DiagramControl组织结构图自定义生成数据并展示这里面绘图主要靠数据源内部的KeyMember 和ParentMember 作为索引。KeyMember 是节点本身，ParentMember 是父节点。diagramOrgChartController1.KeyMember = "Tei";// "Tei";diagramOrgChartController1.ParentMember = "FatherTei";//"FatherTei";diagr_devexpress diagramorgchartcontroller1.datasource

网页自适应移动端及根据访问设备自动识别展示手机站或PC站_自适应网站pc端隐藏移动端显示教程-程序员宅基地

一、7个步骤让PC网站自动适配手机网页传统的网站如何完成向移动设备的快速转型？通过移动适配技术可以实现，移动适配主要通过底层的web技术开发手段来完成，下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！1允许网页宽度自动调整“自适应网页设计”到底是怎么做到的？其实并不难。首先，在网页代码的头部，加入一行viewport元标签。<meta name="v..._自适应网站pc端隐藏移动端显示教程

浏览器UserAgent发展历史-程序员宅基地

某天，我做一个小项目，需要判断一下浏览器类型。简单的呀。控制台敲下：navigator.userAgent 浏览器回应：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36天，这串是啥？你怎么连话都说不清楚？我对userAgent

【python基础】整理笔记（2）_攻防世界pypypy-程序员宅基地

第九章类编写表示现实世界中的事物和类型的类，并基于这些类来创建对象。根据类来创建对象被称为实例化。9.1.1 创建类方法 __init __()将方法定义成三个形参：self、name、age。在这个方法的定义中，形参 self 必不可少，还必须位于其他形参的前面，将自动传递self。class Dog(): """ 模拟小狗的简单尝试 """ def __init__..._攻防世界pypypy

python 运维包_python运维常用模块-程序员宅基地

1、psutil是一个跨平台库(https://github.com/giampaolo/psutil)能够实现获取系统运行的进程和系统利用率(内存，CPU,磁盘，网络等)，主要用于系统监控，分析和系统资源及进程的管理。4、difflib：difflib作为Python的标准模块，无需安装，作用是对比文本之间的差异。5、filecmp:系统自带，可以实现文件，目录，遍历子目录的差异，对比功能。6、..._python 运维管理包