Helper Sass for the fticons image set.
Check out how to include Origami components in your project to get started with o-icons.
There are a few ways to get icons from fticons:
- Use o-icons CSS classes
- Use o-icons Sass mixins with your own CSS.
- Request the icon directly from the Image Service (without using o-icons at all).
To add an icon apply the o-icons-icon class to a span, along with the modifier class for your specific icon e.g. o-icons-icon--arrow-down. See the registry demos for a full list of icons.
<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>This will include icons with a 128px width/height by default.
If you would like to use an icon at a different dimension or colour, use o-icon Sass mixins or request the icon from the Image Service directly (without using o-icons at all).
Use oIconsContent to output the styles for an icon of a given size and colour.
The $color argument should be set using an o-colors Sass function such as oColorsByName, but may be set to any hex value.
// 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>The oIconsContent mixins outputs styles used by each icon. This is inefficient if your project outputs multiple icons. In this case we recommend outputting the base styles separately with 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 includes a media query to restore either a black or white icon in Microsoft's high-contrast mode. If no icon is acceptable for users of Microsoft's high-contrast mode this may be disabled to reduce bundle size:
.no-high-contrast-window {
@include oIconsContent(
$icon-name: 'plus',
$color: oColorsByName('claret'),
$high-contrast-fallback: false
);
}To output all icon helper classes include the oIcons mixin.
@import "@financial-times/o-icons/main";
@include oIcons(); // include helper classes for all iconsTo avoid including all icon helper classes, oIcons mixin also accepts a list of icons to include:
@include oIcons($opts: (
'icons': ('arrow-down', 'audio') // include helper classes for the arrow-down and audio icons
));o-icons is some Sass mixins and helpers for using the fticons image set. To add a new icon you need to add it to the fticons set. There are instructions in the origami-image-service README. When the icon is in fticons, run node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON to update o-icons Sass with the new icon automatically.
If you need to remove an icon from o-icons you run node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON remove.
| State | Major Version | Last Minor Release | Migration guide |
|---|---|---|---|
| ✨ active | 7 | N/A | migrate to v6 |
| ╳ deprecated | 6 | 6.3 | migrate to v6 |
| ╳ deprecated | 5 | 5.9 | migrate to v5 |
| ╳ deprecated | 4 | 4.5 | migrate to v4 |
| ╳ deprecated | 3 | 3.3 | - |
| ╳ deprecated | 2 | 2.4 | - |
| ╳ deprecated | 1 | 1.2 | - |
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published by the Financial Times under the MIT licence.