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
Sizemini tiny small large big huge massive
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Fliphorizontally flipped vertically flipped
Rotationclockwise rotated counterclockwise rotated
Othercircular bordered disabled fitted
Nameicon name
ampAlternative 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 *