京东首页这个是怎么实现的?

小刘
  • 34

如图
图片描述

北京左边那个红点,我以为是图片,结果一审查元素结果是图片描述

它的CSS是
.iconfont {

font-size: 14px;
color: #f10215;

}
类似的效果页面上还有很多,它是怎样做到一个i标签里一个乱码怎么就变成这种红点图片了?

评论
阅读 2.9k
7 个回答

Iconfont-阿里巴巴矢量图标库:http://iconfont.cn/home/index
京东的css代码:

clipboard.png

这是我自己项目的矢量图:

clipboard.png

使用教程:

clipboard.png

字体编码,点击图标复制代码即可,记得图标要上传到对应的项目:

clipboard.png

希望对您有所帮助!

中间你看到的方块乱码应该是这个
<i class="iconfont">&#xe604;</i>
&#xe604;
右键查看源代码是找不到这个元素的,是用过js加进去的,字符在js里。
使用方式可查看此链接unicode引用部分

字体图标, 推介一下淘宝的iconfont

阿里巴巴矢量图

那个不是乱码,,是16进制的颜色值表示

字体图标iconfont 百度查一下阿里巴巴iconfont就知道了

宣传栏