README

FamFamFam Silk 网络图标集的非官方精灵（FamFamFam）。

!! - 此作品为非官方作品，不承担 FamFamFam 的责任。

概述

此包提出了一种基于 FamFamFam Silk 网络图标集的 CSS 精灵。原始图标集在 Creative Commons "署名" 许可证下提出，免费使用，只要您将图像信用归功于 "FamFamFam"。

要了解更多关于 "CSS 精灵" 的概念，请参阅 Sprite（计算机图形）维基百科页面。

使用方法

安装

此包是一个 "独立" 的 CSS 框架。要使用它，您只需从 GitHub 获取其源代码，并将包的 src/ 内容包含到您的项目资源中。

如果您是 Bower 用户，该包已注册，因此您可以在您的 bower.json 中编写

"dependencies": {
    ...
    "atelierspierrot/famfamfam-silk-sprite": "dev-master"
}

如果您是 Composer 用户，该包已引用 Packagist，因此您可以在您的 composer.json 中编写

"require": {
    ...
    "atelierspierrot/famfamfam-silk-sprite": "dev-master"
}

该包具有 library-assets 类型，以便由 Composer 的扩展 Assets Manager 处理。如果您计划使用该管理器，您可以使用包的 assets-install 分支，其中包含 AssetsManager 的需求（确保它在精灵之前加载，并能够在项目资源中移动它）。

HTML 使用方法

将包包含到您的项目中后，您就可以开始使用精灵框架了。

要这样做，您首先需要包含 CSS 定义

<link rel="stylesheet" href="path/to/package/src/silk-icons-sprite.min.css" />

然后您可以使用以下框架编写一些 Silk 图标 span。

在包中的 demo/ 有一个演示页面；它特别显示了可用的图标及其名称。

CSS 框架

该包定义了一些用于轻松渲染图标并减少工作的 CSS 精灵 类。

使用精灵的 CSS 框架基于两个类

第一个是通用和全局的：web-icon,
最后一个用于选择图标本身，即图标的名称。

例如，要渲染 "打印" 图标，您将编写

<span class="web-icon print"></span>

由于精灵未使用限制性CSS规则定义，您可能会遇到渲染问题（例如全局定义的边距或填充），这可以通过为您的图标添加一个reset类来避免。

<span class="web-icon reset print"></span>

致谢

如上所述，原始的图标集由FamFamFam（英国Mark James）制作，并受Creative Commons Attribution许可协议的约束。您可以在任何作品中自由使用它，但必须在显著位置（例如页脚）始终添加指向www.famfamfam.com的链接，包括CC-BY许可协议以及指向www.famfamfam.com的引用，每个使用图标的页面都必须包含这些信息。

精灵是在website-performance.org的帮助下生成的，并且是CSS3有效的。

该包的CSS文件的压缩版本是用YUI Compressor处理的。

PNG精灵是使用Smush.it (TM)优化的。

atelierspierrot / famfamfam-silk-sprite

维护者

详细信息

README

概述

使用方法

安装

HTML 使用方法

CSS 框架

致谢