当前位置:首页 » 《资源分享》 » 正文

iconfont变黑色和引入两个iconfont的解决方案(图文教程)

16 人参与  2024年10月17日 13:20  分类 : 《资源分享》  评论

点击全文阅读


这是官网上的图标,他是彩色的!!!!

这是引入之后的图标

嗯就是纯黑色的!!!那怎么才能让他变成有颜色的?变成下面这样?

雪狼是uniapp的开发的小程序时卡到的!!!

序:

你不仅要解决不出颜色的问题!你还得解决引入两个iconfont的问题。因为带颜色的iconfont一个项目最多只能放40个图标!!!!!!所以本教程分2部分①教你怎么解决引入带颜色图标!②教你怎么引入两个iconfont

正文

        前面说过了,一个iconfont项目,只能有40个图标,所以,你最好新建一个iconfont项目如图

看明白了吗,iconx-和iconfont2,还有字体那边要把彩色这个选项勾起来。

这是第一步,你得去选一些有带颜色的图标加入到你的项目,如图,你搜“客服”,然后选哪个多色的按钮进行筛选。

加入你自己的项目这部就不用我教了吧,我们点到对应的项目,你会看到这里是font-family:是iconfont2了。

你会想说为啥雪狼要让你点这个Unicode 选项?

因为雪狼是uniapp开发的微信小程序。

在app.vue单独引入了iconfont.scss 这个样式

好我们来看iconfont.css这个样式

@font-face {   font-family: 'iconfont';  /* project id  */  src: url('https://at.alicdn.com/t/c/font_xxxx_akr9.eot');  src: url('https://at.alicdn.com/t/c/font_xxxx_akr9.eot?#iefix') format('embedded-opentype'),  url('https://at.alicdn.com/t/c/font_xxxx_akr9.woff2') format('woff2'),  url('https://at.alicdn.com/t/c/font_xxxx_akr9.woff') format('woff'),  url('https://at.alicdn.com/t/c/font_xxxx_akr9.ttf') format('truetype'),  url('https://at.alicdn.com/t/c/font_xxxx_akr9.svg#iconfont') format('svg');}

这个是我上一个iconfont的引入,你看清楚我每个链接前都加了一个https:!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

那我们在他下面加上我们新的那个iconfont2,你自己去复制啊,记得加https:!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

下面这个.iconfont2其实就是你复制一个.iconfont 然后在后面加一个2

然后,你跟着我下图,点他!!!打开他

 

把尾巴这些全部加入到你的font-icon.scss文件里去记得保存文件!!(这里我就不需要截图了吧。)

重点来了!

1、很多小伙伴会发现咦?怎么 好像iconfont2的字体没加载出来?

       他只会在你用它他字体的那个页面才会加载!!!!!!!!你要是详情页才引用到iconfont2相关的字体,那么你在那首页一直刷新个毛线他能出来?????(仅小程序)

2、你一定要给我重新编译一遍小程序!!!!!!!!!!

3、你要是还不会,或者卡到别的问题,可以去雪狼公众号地下留言!!!!!===》程序员野区


点击全文阅读


本文链接:http://zhangshiyu.com/post/173104.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 京圈佛子破戒后,我改嫁京圈纨绔(沈墨渊,白晶晶)
  • 前世被闺蜜害死,重生后我让她从太子妃变疯女苏婉儿,清歌完本_前世被闺蜜害死,重生后我让她从太子妃变疯女(苏婉儿,清歌)
  • 全书浏览七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)_七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)全书结局
  • 今天也没变成昨天(周扬陈默)全书免费_(周扬陈默)今天也没变成昨天后续(周扬陈默)
  • 重生后,秦总非要父以子贵(许沐晴,秦越泽)全书浏览_重生后,秦总非要父以子贵全书浏览
  • 他嫌弃我喝两块钱豆浆上不了台面,我结婚后他又哭又闹全书万照,白青青在线
  • 昭然若梦前尘烬列表_昭然若梦前尘烬(温昭然方池雲)
  • 导师借我股票账号,我倒欠五十万(孟潇潇,宁薇)_导师借我股票账号,我倒欠五十万孟潇潇,宁薇
  • 拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾(周钰泽,蒋清清,思源)全书浏览_拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾全书浏览
  • 我的人生,你已出局(程森凌古楚文)_我的人生,你已出局程森凌古楚文
  • 穿书成病娇女配,睁眼就签下离婚协议书(朱楼)_穿书成病娇女配,睁眼就签下离婚协议书
  • 老婆逼我给白月光捐肾,我死后她悔疯了(宋逸晨沈墨白)全书浏览_老婆逼我给白月光捐肾,我死后她悔疯了全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1