CSS

CSS深入浅出之icon全解

Posted by weite122 on 2018-02-22

切图

  • 当拿到的是psd文件：

    1. 选中图层

    深度截图_选择区域_20180221235713.png

    1. 鼠标右键单击图层

    深度截图_选择区域_20180221235514.png

    1. 新建一个图层

    深度截图_选择区域_20180221235538.png

    1. 裁剪图片

    深度截图_选择区域_20180221235423.png

    1. 设定好尺寸后导出图片png

    深度截图_选择区域_20180221235843.png

  • 拿到的是png文件

    1. 选择图层，剪切图片

    深度截图_选择区域_20180222000816.png

  1. 选中魔法棒

深度截图_选择区域_20180222001007.png

  1. 反选图层按delete

深度截图_选择区域_20180222001531.png

  1. 重复拿到psd文件步骤

img作图法

深度截图_选择区域_20180222102607.png

  • 好处： 自适应宽高，只需设置宽度，高度自适应。

background作图法

深度截图_选择区域_20180222103620.png

  • 好处： 图片和div大小不一样时，图片不会变形。

icon法

  • 可以直接使用iconfont网站的icon，通过三种方式来引用，unicode，font-class和symbol。详细使用方法直接看使用说明。目前最推荐使用第三种方法。用SVG制作的icon具有可以控制宽高，不会出现设置font-size:100px;出现由于字体原因偏差问题，图像放大也没有锯齿，icon也会垂直居中显示，颜色可以渐变等优点。

  • unicode引入
    深度截图_选择区域_20180222110028.png

  • font-class引入
    深度截图_选择区域_20180222142110.png

  • symbol引入
    深度截图_选择区域_20180222154037.png

通过CSS制作icon

FEATURED TAGS
CSS
FRIENDS