CSS 雪碧图生成器
将多个图标合并为一张 PNG 雪碧图,并获得可直接粘贴的 CSS 代码 background-position,用于在您的网站中单独显示每个图标。
未选择图标
工作原理
CSS 雪碧图把多个图标合并到同一个图片文件中,以减少网站的网络请求数量。每个导入的图标都会放入网格中固定大小的单元格,工具会自动为每个图标生成一个 CSS 类,其 background-position 属性指向它在网格中的确切位置。
如何使用生成的 CSS 代码?
下载 PNG,将其以 sprite.png 为名放在样式表旁边(或在 CSS 中调整 URL),把生成的 CSS 代码复制到您的文件中,然后将对应的类(例如 class="icon icon-mon-icone")应用到 span 等 HTML 元素上。
CSS 类名是从哪里来的?
每个类名都由图标的文件名自动生成(转为小写,空格和特殊字符替换为连字符)。如果出现重名,会添加一个编号以保证名称唯一。
雪碧图和 CSS 的生成完全在您的浏览器中进行:您的图标不会上传到任何服务器。