⚠️ 注: 已替换为 : o3 创建请参看 移徙指南 用于升级的步骤.

缩略语

帮手萨斯 语句 图像设定 .

• 缩略语
  • 使用量
  • 内容提要
  • 标记
  • 萨斯
    • 包括大小和颜色不同的图标
    • 使用默认 CSS 帮助类
  • 捐款
  • 移徙
  • 联系人
  • 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-icons。 。 。 .

内容提要

有一些方法可以让图标从 fticons数字 :

1. 使用 o-米ons CSS课程
2. 使用 o- 相片混音器 还有你自己的CSS.
3. 直接从 图像服务 (完全不使用o-icons).

标记

要添加图标,请应用 o-icons-icon 类为 a span,与特定图标的修饰类一起,例如:. o-icons-icon--arrow-down见 故事书演示 对于完整的图标列表.

<span class="o-icons-icon o-icons-icon--arrow-down"></span>
<span class="o-icons-icon o-icons-icon--audio"></span>
<span class="o-icons-icon o-icons-icon--book"></span>

这将包括带有 128px 默认宽度/ 高度 .

如果您想要使用不同尺寸或颜色的图标,请使用 o-icon 萨斯 混合或请求从 图像服务 直接( 完全不使用 o- icons) .

萨斯

包括大小和颜色不同的图标

使用 oIconsContent 以输出具有特定大小和颜色的图标的样式.

这个 $color 参数应使用 o-颜色 Sass 函数, 例如 oColorsByName,但可能设置为任意十六进制值.

// Use o-colors so you can use colors from the Origami palette.
@import "@financial-times/o-icons/main";
@import "@financial-times/o-colors/main";

// Output a 32px, claret coloured plus icon.
.my-icon-plus {
    @include oIconsContent(
        $icon-name: 'plus',
        $color: oColorsByName('claret'),
        $size: 32
    );
}

<span class="my-icon-plus"></span>

这个 oIconsContent 混合每个图标所用的输出样式。 如果您的工程输出多个图标, 效率会低 。 在这种情况下,我们建议将基底样式与 oIconsContentBaseStyles。 。 。 .

// Output a 32px, claret coloured plus icon.
.my-icon {
    @include oIconsContentBaseStyles();
}

.my-icon--plus {
    @include oIconsContent(
        $icon-name: 'plus',
        $color: oColorsByName('claret'),
        $size: 32,
        $include-base-styles: false // do not duplicate the base styles
    );
}

<span class="my-icon my-icon--plus"></span>

o-icons 包括一个媒体查询,以恢复微软高相容模式中的黑色或白色图标. 如果无法为微软的高相容模式的用户接受图标, 则可能无法减少捆绑大小 :

.no-high-contrast-window {
    @include oIconsContent(
        $icon-name: 'plus',
        $color: oColorsByName('claret'),
        $high-contrast-fallback: false
    );
}

使用默认 CSS 帮助类

输出全部图标 帮助类 包括 oIcons 混合剂.

@import "@financial-times/o-icons/main";
@include oIcons(); // include helper classes for all icons

避免包含全部图标 帮助类, (中文(简体) ), oIcons mixin还接受一个图标列表,包括:

@include oIcons($opts: (
    'icons': ('arrow-down', 'audio') // include helper classes for the arrow-down and audio icons
));

捐款

o-icons 是一些用于使用fticons 图像集的 Sass 混音器和助手 。 要添加新图标, 您需要添加到缩写集中 。 里面有说明 折纸图像服务。当图标在窗体中时,运行 node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON 用于更新 o-icons 自动与新图标相配合 .

如果您需要删除图标 o-icons 运行 node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON remove。 。 。 .

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .