legacy-icons/famfamfam-mini

FamFamFam Mini 图标包,可作为单独图标或 CSS 图标精灵表

1.0.0 2016-02-18 11:05 UTC

This package is not auto-updated.

Last update: 2024-09-14 18:26:25 UTC


README

NPM version Bower version Packagist version Nuget version

Dependency Status Build Status

关于

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 请求。

它看起来是这样的

Spritesheet

此图像中所有图标的定位都是通过 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_stoppage_right 图标,您只需将此项目分支,将您的 CLI 指向工作目录,清空 src 目录,除了 action_stoppage_right 图标以外的 GIF 格式,然后运行 gulp build 任务。

您将在 dist 目录中获得适当的精灵表和图标的副本。