微信小程序中引入iconfont阿里矢量图库

阿里矢量图标库:http://www.iconfont.cn/

登录iconfont,我使用的事Github账号进行登录。

阿里矢量图标库

登录完成后搜索自己喜欢的图标 - 收藏入库

收藏
入库

点击图标管理,在我的项目中新建一个项目

新建项目

添加入库的图标至我们的项目

添加到项目

在我的项目中找到刚才创建的项目,选择Unicode,点击下载到本地

下载到本地

下载到本地以后,解压出来有一个文件夹,里面有一个文件名字iconfont.css,编辑并复制其中的内容。

每个人的都不一样,不要复制我的。

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1537179845858'); /* IE9*/
  src: url('iconfont.eot?t=1537179845858#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1537179845858') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1537179845858#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right:before { content: "\e601"; }

.icon-29:before { content: "\e61a"; }

.icon-chongzhi:before { content: "\e614"; }

.icon-guanyuwomen:before { content: "\e61f"; }

.icon-tixian:before { content: "\e649"; }

.icon-order-add:before { content: "\e747"; }

.icon-option:before { content: "\e60b"; }

.icon-guanliyuan:before { content: "\e600"; }

.icon-qianbao:before { content: "\e64a"; }

.icon-xuanxiang:before { content: "\e7ea"; }

.icon-Cash:before { content: "\e611"; }

打开微信开发者工具,找打app.wxss,将刚才复制的内容粘贴至下面

app.wxss

在wxml中引用icon图标,例如引用icon-guanliyuan:before 这是一个管理员图标

引入图标

ps:注意,我为了方便,所以直接写在了app.wxss中,当然你可以自己新建一个wxss文件,然后使用@import方式引入这个wxss样式。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,701评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,649评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,037评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,994评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,018评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,796评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,481评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,370评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,868评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,014评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,153评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,832评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,494评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,039评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,437评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,131评论 2 356

推荐阅读更多精彩内容