icon的几种实现方式

在网页中有许多的icon,购物车,搜索...等等诸如此类,实现的方法也很简单,给一个元素设置背景图就可以实现了,然而每次获取背景图的时候都需要发送一次请求,这是非常浪费的行为,所以一般网页都会使用css sprites。

css sprites:精灵图,也被称为雪碧图。将网页中需要用到的图标用PS合并在一张图片上,通过设置background-position实现icon,当然制作精灵图还有更加简单的方法,可以使用命令行制作,首先安装css-sprite,安装完成之后的步骤如下:

  1. 准备一个目录(resources)里面放需要拼凑的图片
  2. 安装sprity-cli
  3. 命令行: sprity create build resources/*.png -s style.css
  4. 执行之后会生成一个build目录,里面会有一张图片和一个css文件,这样,精灵图就做好了,

或者在线网站 (该链接并非私密链接)也可以制作精灵图,打开链接后如图所示,只需要将需要合并的图片放入黑白格中然后下载就完成了,非常方便。注意,以上方法做出的图片需要先把原图尺寸变为自己需要的尺寸再生成,不然生成之后大小很难更改;

image.png

icon还有一种实现方式,iconFont(字体图标)。在阿里巴巴图标库中,有许多的字体图标,你可以选择你需要的图标使用,详细的使用方法如下:

把需要的图标下载至本地,打开这个zip文件,将(eot/ttf/svg/woff)这四个格式的文件放置在你的images文件夹,打开文件中的css文件,复制@font-face一整段声明该字体,注意url的路径不要弄错;声明之后在需要使用该图标的地方输入Unicode编码就可以使用该字体图标了。当然如果库中没有你想使用的字体图标,你还可以自己上传图标,上传方法可以点帮助进行查看。

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

推荐阅读更多精彩内容

  • 需求:一个页面上有很多小图标 一,image 使用image来实现,要注意的问题: img的大小设置 img的ve...
    DeeJay_Y阅读 829评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,558评论 25 708
  • icon 的各种实现方式 需求:一个页面上有很多个小图标 实现方式:imageCSS SpritesIcon Fo...
    _空空阅读 1,318评论 0 2
  • 首先安装nodejsmac用户可以试试iTerm替代原生的命令行工具 npmnpm会随着node安装而安装 npm...
    xx_Shen阅读 229评论 0 1
  • 今天又是一天奔波,工作的逻辑很简单,也会犯错误,但不知道这种逻辑会不会有大的问题,你也帮我想想,一切安好,晚安!
    何时再出发阅读 134评论 0 0