html5 - 这种标志是用CSS样式做出来的吗?
扔个三星炸死你
扔个三星炸死你 2017-06-29 10:09:55
0
6
844

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

扔个三星炸死你
扔个三星炸死你

全部回复(6)
洪涛

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

ringa_lee

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

習慣沉默

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

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

具体可以看iconfont的使用

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

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

三叔

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

2.css中引入本地or在线链接(上图),本地方法相同。

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

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

Ty80

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

世界只因有你

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板