README

未官方的《免费线框工具栏图标集》精灵，由Gentleface UI / UX设计（http://www.gentleface.com）提供。

!! - 该作品非官方，对Gentleface不承担任何责任，但已开发并在以下条件解释下获得其同意后可供公共下载和使用。

概述

此包提出了一些基于Gentleface自定义工具栏图标构建的CSS精灵。原始图标集在Creative Commons "署名 - 非商业"许可下提供，只要您将图像归功于 "Gentleface UI / UX设计"，即可免费用于非商业用途。有关版权许可的更多信息，请参阅页面底部。

有关“CSS精灵”设计的更多信息，请参阅Sprite（计算机图形）维基百科页面。

与原始图标集一样，提出的精灵图标以黑白、16x16、24x24、32x32和48x48像素提供。

用法

安装

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

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

"dependencies": {
    ...
    "atelierspierrot/gentleface-sprites": "dev-master"
}

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

"require": {
    ...
    "atelierspierrot/gentleface-sprites": "dev-master"
}

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

HTML用法

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

为此，您首先需要包含CSS定义

<link rel="stylesheet" href="path/to/package/src/gentleface-sprites.min.css" />

然后您就可以开始使用以下框架编写的Gentleface图标span。

在全局包（需要PHP服务器）的demo/目录中提供了一个演示页面（需要PHP服务器）；它特别显示了可用的图标及其名称。

CSS框架

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

使用精灵图标的CSS框架基于三个核心类

• 第一个用于选择图标大小：使用gentleface-XX，其中XX为16、24、32或48,
• 第二个用于选择图标颜色：black或white,
• 最后一个用于选择图标本身，即图标的名称。

例如，要渲染一个黑色、24x24像素的“balance”图标，您将编写

<span class="gentleface-24 black balance"></span>

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

<span class="gentleface-24 black reset balance"></span>

一个简单的gentleface类被设计为一个快捷方式，默认为16x16像素大小的黑色图标。例如，以下两个是等效的

<span class="gentleface-16 black balance"></span>
<span class="gentleface balance"></span>

最后，一些类可以用于定义图标上的常见效果

• 使用带有hover-COLOR类的图标对包含图标的链接应用“hover”效果，这意味着当鼠标悬停在链接上（hover事件）或当它被聚焦时（focus事件），图标将切换到相关的COLOR（黑色或白色）。
• 使用带有active-COLOR类的图标对包含图标的DOM元素应用“active”效果，这意味着当容器拥有active类（例如菜单项）时，图标将切换到相关的COLOR。

示例

<a href="#" title="Icon with hover effect">
    <span class="gentleface-48 hover-white rss"></span>
</a>

<a href="#" title="Inversed icon with hover effect">
    <span class="gentleface-32 white hover-black rss"></span>
</a>

<ul>
    <li title="Classic state icon">
        <span class="gentleface-24 active-white shield"></span>
    </li>
    <li class="active" title="Active state icon">
        <span class="gentleface-24 active-white shield"></span>
    </li>
</ul>

致谢

如上所述，原始图标集由Gentleface制作，并按Creative Commons Attribution-Non Commercial许可提出。您可以在个人（非商业）作品中免费使用它，但必须在显著位置（例如页脚）始终添加www.gentleface.com的链接，包括CC-BY-NC许可和在每个使用图标的页面上引用www.gentleface.com。

要在商业网站、应用程序（包括网络应用程序）和服务上使用这些图标（以及此包），您可以在Gentleface.com上购买Royalty Free许可。此许可版本包括EPS和SWF矢量文件。

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

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

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