RefineryCMS 图标使用指南：从基础到高级应用

RefineryCMS 图标使用指南：从基础到高级应用

前言

在 RefineryCMS 3.0 及以上版本中，系统采用了 Font Awesome 图标库作为后台界面的视觉元素。本文将全面介绍如何在 RefineryCMS 中使用这些图标，包括基础用法、扩展开发中的高级应用，以及自定义图标样式等技巧。

Font Awesome 图标基础

RefineryCMS 内置了 Font Awesome 4.3 版本的全部图标资源。这些图标可以直接在前端视图中使用，使用方式非常简单：

<i class="fa fa-camera-retro"></i>

这段代码会在页面上显示一个复古相机图标。Font Awesome 提供了丰富的图标选择，涵盖了各种常见的界面元素需求。

在扩展中使用预定义图标

系统内置图标

RefineryCMS 在核心模块中预定义了一系列常用图标，这些定义位于 refinerycms/core/app/assets/stylesheets/refinery/_icons.scss 文件中。该文件不仅包含图标定义，还提供了一些有用的 SASS mixin。

使用系统预定义的图标非常简单。例如，要添加一个关闭图标（实际上是 Font Awesome 的 times-circle 图标），只需为元素添加 close_icon 类：

<a href='#' class='close_icon'>关闭</a>

使用图标辅助方法

RefineryCMS 提供了一些便捷的辅助方法来生成带有图标、标签和提示的链接。这些方法常用于创建编辑、删除、预览和添加/新建等操作按钮。典型用法如下：

<%= action_icon(:preview, page.url, t('.view_live_html')) %>
<%= action_label :add, insert_link, t('.no_resource_selected'), {id: add_resource_id, class: add_class } %>

方法签名说明：

action_icon(action, url, title, options)
action_label(action, url, title, options)

其中：

• options 是一个哈希，可以包含 class、id 等任何 link_to 方法支持的参数
• title 在 action_label 中会显示为链接文本的一部分，而在 action_icon 中则会成为工具提示

自定义图标样式

使用 icon mixin

RefineryCMS 提供了 icon mixin，可以用来定义新的图标类或修改现有图标的样式。mixin 的定义如下：

@mixin icon($icon-selector, $color: $icon_default_colour, $padding: 4px, $size: 1.2em, $float: none)

前端样式调整

要为前端自定义图标，需要将 application.css 重命名为 application.scss，并将现有的 CSS 代码移动到 SASS 局部文件中（例如 _main.scss）。

后端样式调整

后端 CSS 必须使用 SCSS 或 SASS 文件。假设你的样式已经移动到 _main.scss，并且使用 refinerycms-gadgets.scss 作为主样式表。

重要提示：Rails 现在推荐直接使用 .sass 或 .scss 文件类型。SCSS 是 CSS 的超集，因此你可以直接将 .css 文件重命名为 .scss 而无需修改内容。

自定义图标示例

以下示例展示了如何为 gadget_icon 类添加复古相机图标：

// refinerycms-gadgets.scss 或 application.scss

// 引入 Refinery 的依赖
@import 'refinery/mixins';
@import 'refinery/colours';
@import 'font-awesome-sprockets', 'font-awesome';
@import 'refinery/icons';

// 引入本地文件
@import 'main';
@import 'iconify';

// _iconify.scss
.gadget_icon {
  @include icon('camera-retro');
}

// _main.scss
ul#gadgets {
  background-color: black;
  li {
    @extend .gadget_icon;  // 或者直接使用 @include icon('camera-retro')
    a {
      color: CadetBlue;
    }
  }
}

修改图标颜色和大小

如果对 Refinery 默认的图标颜色（黑色）和大小（1.2em）不满意，可以轻松修改：

.gadget_icon {
  @include icon('camera-retro', $color: DodgerBlue, $size: 1.5em);
}

可用图标参考

RefineryCMS 初始版本提供了丰富的图标选择，包括但不限于常见的操作图标、状态指示图标等。开发者可以根据实际需求选择合适的图标来增强用户界面的表现力。

最佳实践建议

1. 保持一致性：在整个项目中保持图标使用风格一致
2. 适度使用：避免过度使用图标，只在能增强用户体验的地方使用
3. 考虑可访问性：确保图标有适当的文本替代或提示
4. 性能优化：由于使用字体图标，只需加载一次字体文件即可在所有页面使用

通过合理利用 RefineryCMS 的图标系统，开发者可以创建出既美观又功能强大的后台界面，提升整体用户体验。