Icon

Chap includes Semantic UI's complete port of Font Awesome 4.7 or Font Awesome 5.0 designed by Dave Gandy.

[icon] shortcode arguments
classes:
Size -
[mini|tiny|small|large|big|huge|massive]
Color -
[red|green|blue|...]
Flip -
[horizontally flipped|vertically flipped]
Rotation -
[clockwise rotated|counterclockwise rotated]
Other -
[circular|bordered|disabled|fitted]
Name -
[icon name]
amp:
Alternative Font Awesome (4.7) class name to use on AMP pages (fa and fa- prefixes not needed).
Find all the available icons at semantic-ui.com/elements/icon.html
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>
Icons with text gradient
<icon massive home text-gradient="19deg, #21D4FD 0%, #B721FF 100%">
<icon massive cloud text-gradient="90deg, #FAD961 0%, #F76B1C 100%">
<icon massive open envelope text-gradient="45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%">
<icon massive theme text-gradient="135deg, #8BC6EC 0%, #9599E2 100%">
<icon massive users text-gradient="43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%">
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 yet supported on AMP pages, 4.7 is used. 
    For icons that were added in 5.0 you can specify an alternative FA value for AMP pages 
--{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.

Leave a comment

Your email address will not be published. Required fields are marked *