Icon
Chap includes Semantic UI's complete port of Font Awesome 4.7 or Font Awesome 5.0 designed by Dave Gandy.
Both of icon sets use Semantic UI icon class naming. AMP pages only support 4.7, so if you're using 5.0 then some icons may look slightly different.
New
Chap theme now also includes Font Awesome SVG icon theme which ditches the Semantic UI icon naming system (35kb less CSS) and doesn't need to load icon font files (75kb less assets). Icon themes can be changed from Chap Theme -> Themes -> Elements -> Icon. SVG icon theme is recommended for best performance and latest icons.Icon shortcode arguments
| Classes |
| ||||||||||||
amp | Alternative Font Awesome (4.7) class name to use on AMP pages (fa and fa- prefixes not needed). | ||||||||||||
svg | Relative SVG path to icon when using SVG icons (ex: solid/cat, regular/id-badge, brands/google). |
Find the Semantic UI icons at semantic-ui.com/elements/icon.html
If you're using SVG icons theme then all the icons are available at fontawesome.com/icons
Icons
<icon user>
<icon disabled user>
<icon users>
<icon disabled users>Icon sizes
<icon mini home>
<icon tiny home>
<icon small home>
<icon home>
<icon large home>
<icon big home>
<icon huge home>
<icon massive home>Icon colors
<segment compact>
<icon big red wordpress simple>
<icon big orange wordpress simple>
<icon big yellow wordpress simple>
<icon big olive wordpress simple>
<icon big green wordpress simple>
<icon big teal wordpress simple>
<icon big blue wordpress simple>
<icon big violet wordpress simple>
<icon big purple wordpress simple>
<icon big pink wordpress simple>
<icon big brown wordpress simple>
<icon big grey wordpress simple>
<icon big black wordpress simple>
</segment>
<segment compact inverted>
<icon big inverted red wordpress simple>
<icon big inverted orange wordpress simple>
<icon big inverted yellow wordpress simple>
<icon big inverted olive wordpress simple>
<icon big inverted green wordpress simple>
<icon big inverted teal wordpress simple>
<icon big inverted blue wordpress simple>
<icon big inverted violet wordpress simple>
<icon big inverted purple wordpress simple>
<icon big inverted pink wordpress simple>
<icon big inverted brown wordpress simple>
<icon big inverted grey wordpress simple>
<icon big inverted black wordpress simple>
</segment>Icon variations
<icon large horizontally flipped cloud>
<icon large vertically flipped cloud>
<icon large clockwise rotated cloud>
<icon large counterclockwise rotated cloud>
<icon large circular cloud>
<icon large circular teal cloud>
<icon large circular inverted cloud>
<icon large circular teal inverted cloud>
<icon large bordered cloud>
<icon large bordered blue cloud>
<icon large bordered inverted cloud>
<icon large bordered blue inverted cloud>Font Awesome 5 AMP
{lt}!--
On AMP pages Semantic UI icon class names are automatically converted to Font Awesome equivalent.
Font Awesome 5 is not supported on AMP pages, so 4.7 is used.
For icons that were added in 5.0 you can specify an alternative FA value for AMP pages.
New: Chap 1.19.9 now offers SVG icons which are latest Font Awesome version and work
exactly the same on AMP and non-AMP pages (as well as provide performance improvements).
SVG icons can be enabled under Chap Theme -{gt} Themes -{gt} Elements -{gt} Icon.
--{gt}
<icon big wordpress simple amp="wordpress">
{lt}!-- "wordpress-simple" was added in 5.0, 4.7 only had "wordpress" icon --{gt}
<icon big file video amp="file-video-o">
{lt}!-- "file-video" was added in 5.0, 4.7 only had "file-video-o" icon --{gt}
<icon big gitkraken amp-invisible>
{lt}!-- Alternatively you can just hide the icon on AMP pages --{gt}Notes
Font Awesome 5 can be enabled under Chap Theme -> Themes -> Elements -> Icon.