icon的各种实现方式

1.使用image来实现

注意
1.要小心的设置image的宽高。
2.要注意设置vertical-align。
3.这种方式请求数过高。
Tip:请求时邪恶的吗?
明明可以发更少的请求,你却发了更多的请求,这才是邪恶的。

2.使用CSS Sprites来实现

3.使用Icon Font来实现

  • 过程
    1.制作字体文件
    2.声明font-family
    (1)使用本地链接
    (2)使用第三方链接
    3.使用font-family
    (1)使用html实体
    (2)使用CSS:before

4.使用CSSicon来画

5.使用SVG来实现

1.img src=svg
2.SVG“sprites”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • icon 的各种实现方式 需求:一个页面上有很多个小图标 实现方式:imageCSS SpritesIcon Fo...
    _空空阅读 5,160评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,681评论 1 92
  • 大家好,我是Lotus,俩宝妈妈,在家带孩子三年左右,现在刚去上班不到两个月。加入大V之前有读育儿书,有接触绘本,...
    阅历悦心阅读 1,462评论 0 0
  • 【小小陪伴】20170716学习力践行记录D62:1、早上英语磨耳朵 2、重复复习《敕勒歌》 3、指读《洗澡》...
    睿依show阅读 747评论 0 0
  • 今天是端午节,也是小长假最后一天。话说这个小长假你哪里也没去,除了去上课,其他时间都宅在家里,妈妈想带你出...
    珠珠米阅读 1,358评论 0 0