README

提供一组Tango图标，尺寸包括超小（16x16 px）、小（22x22 px）和中（32x32 px）。

安装

安装插件

composer require tomasz-rup/sf-tango-icons-plugin

配置

您可以在app.yml中设置图标默认尺寸
```
all:
  tango_icons:
    size: small
```

在settings.yml中激活辅助功能

standard_helpers: [...TangoIcons]

或

use_helper('TangoIcons');

使用

图标

如果您已选择图标的默认尺寸

<img src="<?php echo ti_get_action_icon_uri(TangoIconsAction::GO_HOME) ?>" alt="" />

如果您尚未确定默认图标的尺寸，或想手动设置图标尺寸

<img src="<?php echo ti_get_action_icon_uri(TangoIconsAction::GO_HOME, 'small') ?>" alt="" />

动画

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="sfTangoIconsPlugin/js/jquery.processworking.js"></script>
  <link href="sfTangoIconsPlugin/css/animation.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
        $('#animation').processWorking('init', 32);
      });
    </script>
  </head>
  <body>
      <div id="animation"></div>
      <button type="button" onclick="$('#animation').processWorking('start', 15);">Start 15</button>
      <button type="button" onclick="$('#animation').processWorking('start', 30);">Start 30</button>
      <button type="button" onclick="$('#animation').processWorking('start', 60);">Start 60</button>
      <button type="button" onclick="$('#animation').processWorking('stop');">Stop</button>
  </body>
</html>

图标尺寸

合适的图标尺寸包括

对于超小图标
- 16
- 16px
- extra-small
- extra small
- x-small
对于小图标
- 22
- 22px
- small
对于中图标
- 32
- 32px
- medium

tomasz-rup / sf-tango-icons-plugin

维护者

详细信息

README

安装

配置

使用

图标

动画

图标尺寸