自制按钮图标的两种方法: image sprite和svg字体文件

用image sprite和svg字体文件这两种方法,都能够极大地减少小图形文件的数量, 从而减少服务器请求和带宽需求。提高网页的响应速度。

一、建立SVG字体文件

iconmoon 是一个在线工具,可以上传自己的SVG格式的图标文件,也可以从其中选择已有的图标, 定制出自己的字体文件。下载的结果包括了字体文件和一个简单的demo.html,

(https://icomoon.io/app/#/select),

(类似工具: https://glyphter.com)

二、用 image sprite

spritegen是一个在线工具,只要上传自己的image格式的图标文件, 就能够生成sprite文件和对应的css样式

http://css.spritegen.com/

三、自己动手写:

假设小图标已经手工合并到一个大图imageSprite.png中,其中每一个小图标占W*H的大小,W= 100,H=50,那么,css内容如下:(其中的class 名称可以自取)

.icon-demo-base {    background: url(‘imageSprite.png‘) no-repeat;    display: inline-block;    height: 50px; /* 每一个icon的 height和width */    width: 100px;}

.icon0-0 {    background-position: 0 0;  /* sprite图的左上角是(0,0)点, */

}.icon1-0 {

    background-position: -100px 0;}.icon2-0 {    background-position: -200px 0;}.icon3-0 {    background-position: -300px 0;}

More:

* 在PS中可以把图像输出为SVG(File > Extract Assets”, 要求Photoshop CC版本高于October 2014 Update, http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/)

* image转SVG的在线工具: https://image.online-convert.com/convert-to-svg

* 如何设置SVG图的原点和基本大小
https://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/

* https://www.sitepoint.com/build-svg-icons/
<img src="Chess_Pieces_Sprite.svg#black-horse">

* gulp-svg-spritesheet

gulp.spritesmith (用canvas,依赖于:  Cairo and node-gyp

* http://fontastic.me/howto

http://fontello.com/: 字体有收费的

时间: 2024-10-08 22:17:20

自制按钮图标的两种方法: image sprite和svg字体文件的相关文章

学习笔记:ubuntu永久修改DNS的两种方法

因直接修改/etc/resolv.conf重启会失效,所以有以下两种方法设置 方法一:修改文件/etc/network/interfaces dns-nameservers 192.168.1.1 方法二:修改文件/etc/resolvconf/resolv.conf.d/base(这个文件默认为空),多个dns可加一行 nameserver 192.168.1.1 nameserver 192.168.1.2 :wq   #保存退出 resolvconf -u   #执行 完成 通过/etc/

CAD图纸转换成高质量的PDF文件,两种方法一步搞定哦

其实提到CAD,可能大家都大致的了解,CAD现在已经是建筑行业运用的非常广泛的一个设计软件了,其实CAD就是一种计算机辅助软件,可以高效的帮助我们进行图纸的绘制.我们一般在设计完图纸,可能定会转换格式,以至于可以方便的进行工作,PDF文件刚好有着很好的加密性,用起来方便快捷,真的是省时又省力.那接下来,就给大家看一下,怎么用两种方法,快速将CAD图纸文件转换成高质量的PDF文件吧. 第一步:首先,在你的电脑桌面上双击鼠标左键,开始运行CAD转换器.并在软件的下方界面中找到[CAD转PDF]功能属

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" class="heart"> <span>1169</span> <img src="" class="comment"

文字转语音文件的两种方法

文件转语音文件的两种方法.小伙伴们在日常的工作.学习或是生活当中,是否遇到过以下这种情况.在工作中每天要阅读大量文件资料,在学习中每天要阅读各种课文,在生活中也会观看各种小说.但是长时间的用眼阅读,就会使大家的眼睛感到疲劳,十分的酸痛,可是又需要将剩下的内容阅读完.在这种时候就变得十分无奈,大家就会像如何能将文字转换为语音就好了.那么今天小编就将教给大家如何将文字转换为语音文件. 1.在开始转换前,需要小伙伴们先打开电脑里的浏览器,并输入搜索文字转语音在线转换,然后点击进入搜索到得页面当中. 2

pdf文件怎么修改 修改PDF文件的两种方法

都说PDF格式的文件不能修改,我就呵呵了!不管你们信不信,反正我是不信.因为我会修改PDF文件,并且方法还不止一种.想知道我是怎么修改PDF文件的吗?下面我就告诉大家修改PDF文件的两种方法. 方法一 1.方法一就是将PDF文件转换成一种可容易编辑的文档,如:word.excel.ppt等格式,然后再进行编辑,编辑好后再将其转换成PDF格式,是不是很简单!具体是该如何转换的,下面有详细教程. 2.下载一个PDF转换器,并将它安装在电脑上.工具最好是支持双向转换的那种,如:http://www.x

UIImage加载图片的两种方法区别

Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路径. 那么两种有什么区别吗? 肯定是有的.根据Apple的官方文档: imageNamed: 这 个方法用一个指定的名字在系统缓存中查找并返回一个图片对象如果它存在的话.如果缓存中没有找到相应的图片,这个方法从指定的文档中加载然后缓存并返回这 个对象.因此imageNamed的优点是当加载时会缓存图

WPF多线程UI更新——两种方法

WPF多线程UI更新--两种方法 前言 在WPF中,在使用多线程在后台进行计算限制的异步操作的时候,如果在后台线程中对UI进行了修改,则会出现一个错误:(调用线程无法访问此对象,因为另一个线程拥有该对象.)这是很常见的一个错误,一不小心就会有这个现象.在WPF中,如果不是用多线程的话,例如单线程应用程序,就是说代码一路过去都在GUI线程运行,可以随意更新任何东西,包括UI对象.但是使用多线程来更新UI就可能会出现以上所说问题,怎么解决?本文章提供两个方法:Dispatcher(大部分人使用),T

QT中获取选中的radioButton的两种方法(动态取得控件的objectName之后,对名字进行比较)

QT中获取选中的radioButton的两种方法 QT中要获取radioButton组中被选中的那个按钮,可以采用两种如下两种办法进行: 方法一:采用对象名称进行获取 代码: 1 QRadioButton* pbtn = qobject_cast<QRadioButton*>(ui->BG->checkedButton()); 2 QString name = pbtn->objectName(); 3 if(!QString::compare(name, "rad

Android高手进阶教程(十七)之---Android中Intent传递对象的两种方法(Serializable,Parcelable)!

[转][原文] 大家好,好久不见,今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是Bundle.putParcelable(Key, Object);当然这些Object是有一定的条件的,前者是实现了Serializable接口,而后者是实现了Parcelable接口,为了让大家更容易理解我还是照常写了一个简单的Demo,大家就一步一步跟我来吧! 第一步:新建一个andr