最近我又在折腾某系统的某页面了,这次不是搞什么功能,就单纯想在页面上加个微信的图标。
结果没想到的是,由于一个小失误,导致图标怎么也无法正常显示。
到底怎么一回事呢?
打开系统后台,开启社交媒体图标。
你瞧,这些社交媒体的图标一应俱全,什么油管啊,什么非死不可啊,却唯独没有我大微信,这怎么行呢!
好吧,我想要在放大镜(搜索)图标旁边加一个微信图标,系统使用的是 Font Awesome
图标字体库,这应该挺简单的吧!
(现在想想问题并没有那么简单!)
不就加个图标嘛,简单,上代码,刷新页面。
<i class="fa fa-weixin"></i>
纳尼,图标显示异常?!
我一脸懵逼,代码有错误?
不能吧!
ab
的 a
,ab
的 b
啊,一字不差啊!
为了确定我敲的是英文字母,我特意打开某字体中文网再次验证。
完全正确啊,这下可给我整不会了!
难道还有其他写法?
我一肚子疑惑,只好直奔英文官网,那儿总不会有错吧!
一顿翻箱倒柜发现这玩意居然是这样的!
<i class="fa-brands fa-weixin"></i>
我去,怎么还真变样啦,啥时候变的啊?
不管了,直接复制粘贴大法,没想到图标还是显示异常!
这下彻底给我整不会了,我寻思今天出门没看黄历,没那么严重吧?
兜兜转转期间换了好几个网站,我一度还怀疑是不是这个 Font Awesome
库里并不支持微信图标,最后还是在英文官网的搜索栏上发现了端倪。
看到了没?
我就奇怪怎么还有选择版本的?
我在英文官网上搜索微信图标的时候,它默认是 6.x
版本的,而后我确认我用的系统字体却是 5.x
的。
法克,搞了半天是版本问题啊!
难道版本不同代码也不一样咩?
果断选择 5.x
版本后再次搜索,得到以下代码。
<i class="fab fa-weixin"></i>
你看,样子又变了不是!
有的小伙伴肯定会问了,那你最开始怎么是 fa
这样子的。
我只能一头汗地告诉你,那是 4.x
版本的,仔细回看那图片,版本有点旧了哈!
我一边哼着“我们不一样...不一样...”,一边将 5.x
版本的代码敲了进去,保存刷新走起。
哇哈哈,卡瓦伊的微信图标终于粗线了!
最后,以我这三脚猫功夫的野生码农为教训,替遇到同样“问题”的小伙伴们解惑,方便大家少走弯路!
劝在座的各位,千万别学我这般水平又臭、做事又马虎的摸鱼翁,要是当初认真仔细地看一下其他图标的代码也不至于把自己给搞得这么惨啊!
好了,解散之前请大家动动小手,帮忙关注转发分享,莫学我偷懒哦!
将技术融入生活,打造有趣之故事。
网管小贾 / sysadm.cc