legacy-icons / famfamfam-mini
FamFamFam Mini 图标包,可作为单独图标或 CSS 图标精灵表
README
关于
Mini
图标包,可在 famfamfam 网站 上找到。
所有这些图标的版权均归原作者 Mark James 所有(mjames@gmail.com)
本项目的目的是通过各种包管理器提供此图标包,例如
所有图标均以 GIF 格式提供。
CSS 精灵表
您可以直接使用常见的 IMG 标签将图标插入到您的 HTML 中
<img alt="Refresh" src="dist/gif/action_refresh_blue.gif" width="16" height="16">
除了单独的图标外,此项目还提供了一个用于图标包的 CSS 精灵表。此精灵表允许将整个图标包加载到单个图像中,从而减少 HTTP 请求。
它看起来是这样的
此图像中所有图标的定位都是通过 CSS 实现的,这使得您只需添加具有正确类的块类型标签即可获得相同的结果
<div class="famfamfam-mini action_refresh_blue"></div>
只需记住将 CSS 样式表添加到您的 HTML 页面的 HEAD 部分!
安装
使用 NPM 获取包
npm install famfamfam-mini
使用 Bower 获取包
bower install famfamfam-mini
使用 Composer / Packagist 获取包
composer require legacy-icons/famfamfam-mini
使用 NuGet 获取包
Install-Package famfamfam-mini
构建整个项目或自定义项目
我们使用 Gulp 来构建项目,因此如果您想重新构建或自定义此项目,您将需要 Gulp。
在安装 Gulp 并将您的 CLI 指向工作目录后,首先安装依赖项
使用 NPM 2.x.x
npm install
使用 NPM 3.x.x(在解决此模块依赖项之前解决 node-spritesheet
的依赖项)
npm install grunt grunt-contrib-coffee grunt-contrib-clean
npm install
然后请确保您已安装 ImageMagick 以构建精灵表。
然后,您可以运行 gulp build
任务来构建项目
gulp build
构建任务做什么?
首先,它从 src
文件夹复制 GIF 文件,并将它们粘贴到 dist
文件夹。
然后它从位于 src
文件夹中的 GIF 图像创建精灵表,从而在 dist
中创建 sprite
文件夹。
例如,如果您只想在精灵表中包含 action_stop
和 page_right
图标,您只需将此项目分支,将您的 CLI 指向工作目录,清空 src
目录,除了 action_stop
和 page_right
图标以外的 GIF 格式,然后运行 gulp build
任务。
您将在 dist
目录中获得适当的精灵表和图标的副本。