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

Question

如图

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

它的CSS是
.iconfont {

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

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

Answer 1

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

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

使用教程：

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

希望对您有所帮助！

Answer 2

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

Answer 3

思路：fontawesome -> map-marker
http://fontawesome.dashgame.com/

Answer 4

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

Answer 5

阿里巴巴矢量图

Answer 6

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

Answer 7

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