o-icons
Helper Sass for the fticons image set.
Summary
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).
Markup
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. Or use the Sass mixins to include icons of a given dimension and colour.
Sass
Includes icons of different sizes and colors
Use oIconsContent
to output the styles for an icon of a given size and colour.
@import "o-icons/main";
@import "o-colors/main";
.my-icon-plus {
@include oIconsContent(
$icon-name: 'plus',
$color: oColorsGetPaletteColor('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
.
.my-icon {
@include oIconsContentBaseStyles();
}
.my-icon--plus {
@include oIconsContent(
$icon-name: 'plus',
$color: oColorsGetPaletteColor('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: oColorsGetPaletteColor('claret'),
$high-contrast-fallback: false
);
}
Using the default CSS helper classes
To output all icon helper classes include the oIcons
mixin.
@import "o-icons/main";
@include oIcons();
To 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
));
Contributing
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 fticons README. When the icon is in fticons, run node ./scripts/build-icon-list.js
to update o-icons
Sass with the new icon automatically.
Migration
Contact
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.
Licence
This software is published by the Financial Times under the MIT licence.