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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

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

☎

具体可以看iconfont的使用

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

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

Answer 4

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

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

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

.myIcon{
    font-family: icon;
}
<span class="myIcon">&#xe6d6;<icon>

Answer 5

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

Answer 6

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