zoukankan      html  css  js  c++  java
  • 「CSS Warning 2」icon 的做法

    icon 的做法

    在前端开发过程中,项目中使用 icon 是非常常见的。如何使 icon 正常地呈现在页面上是一个前端的职责之一。

    接下来就整理下有关于 icon 的整理做法,参考了方老师的 「CSS深入浅出」课程。


    场景:假设有一个 PSD 文件,里面包含了各种图标:

    photoshop

    如果要把这些图片放到我们的项目中,应该怎么做呢?

    • 使用 img 制作 icon 推荐指数 ★★☆☆☆

    选中图标 -> 右键选中图层 -> 复制图层到新文档 -> 裁剪图片(根据可见像素) -> 根据需要调整画板尺寸 -> 切图完成 -> 导出 PNG -> 使用 img 标签插入到页面中 -> Done

    <img src='./xx.png'>

    • 使用 background 推荐指数 ★★☆☆☆

    通过 background url属性设置 icon

    <style>
        .icon{
            100px;
            height:100px;
            background:url(./xx.png)
        }
    </style>
    <div class='icon'><div>
    
    • CSS Sprites 推荐指数 ★★☆☆☆

    使用 CSS Sprites 制作 icon,他把多张图片(icon)合成一张图片,然后通过 background-positionoverflow:hidden 显示这张图片的某个位置,来达到相当于「截取局部图片」的功能。

    sprites

    sprites


    除此之外,还可以使用 iconfont:

    iconfont

    官方帮助文档

    • 把图标写入 HTML 中:推荐指数 ★★★☆☆

    选择需要的icon -> 加入项目中 -> 生成代码

    iconfont

    把代码复制到个人项目中:

    iconfont

    • 可以把图标写进CSS(伪类)中:推荐指数 ★★★☆☆

    iconfont 伪类

    • 当然,更方便的,还有以下这种方式:推荐指数 ★★★★☆

    iconfont

    iconfont class

    • SVG icon 推荐指数 ★★★★★

    使用 svg 制作 icon 的优势:

    svg

    使用方法:

    svg

    如:

    svg

    肯定是最后一种又方便又快捷的方式最好啦~

  • 相关阅读:
    python 网络爬虫框架scrapy使用说明
    计算机数据表示
    NoSQL 数据库应用
    什么是java序列化?什么情况下需要序列化?
    怎么实现动态代理?
    动态代理是什么?应用场景?
    什么是反射?有什么作用?
    nio中的Files类常用方法有哪些?
    什么是JAVA内部类?
    常见的异常类有哪些?
  • 原文地址:https://www.cnblogs.com/No-harm/p/9945689.html
Copyright © 2011-2022 走看看