html5 - 这种标志是用CSS样式做出来的吗？

问题描述

这种评论 转发的图标我看了一下源码 好像不是用的图片 好像是一种样式 那么这个样式是怎么做的呢

问题解答

iconfont实现的吧:http://www.iconfont.cn/

这个找个图标的网站，然后生成一个css文件，用的时候引用就行了

其实是用了iconfont啦在网页中设定浏览者系统中没有的字体浏览器下载字体文件，并用相应的字体进行渲染

所谓字体就是字符编码对应的图形比如下面这个电话图标实际上就是一个字可以选中复制粘贴但是根据环境所在对应字体不同可能显示的形式会不同最不济的情况，可能设定的字体里面压根没有这个编码对应的图形就不会显示了

☎

具体可以看iconfont的使用

这样做的优点显而易见，字体也是文字，可以跟随其他文本元素设置字体大小，颜色，装饰，而且不会缩放失真

缺点同样显而易见，它不是图片，所以像图片那样的彩色图标就实现不了了

用图标实现的，楼上发的就是一个网站，我来说点具体的。1.先在网站上选好图标然后保存在一个项目里，然后下载到本地里（这里也可以用在线链接，下图就是两个操作方式的地方，也是在iconfont）

2.css中引入本地or在线链接（上图），本地方法相同。

3.在要使用的样式中指定font-family为icon，使用icon码子，比如途中第一个图标重新加载

.myIcon{ font-family: icon;}<span class='myIcon'>&#xe6d6;<icon>回答5：

前端真是八仙过海各显神通， 除了icon 还有base64 还是svg 甚至于canvas也能做

最简单就用bootstraphttp://v3.bootcss.com/compone...link引入bootstrap，然后在标签直接加类名就好了<button class='btn btn-default'>全屏 <span class='glyphicon glyphicon-fullscreen'></span></button>