Requirements

Part of the Icon block is in JavaScript, and all of the Framework8 JavaScript blocks, including this block, require jQuery.

CSS Custom Properties

<style>
  .f8-icon {
    --f8-icon-color: var(--f8-blocks-def-text-color);
    --f8-icon-size: 32px;
  }
</style>

Simple Icons

<i class="f8-icon f8-icon--ic-framework8"></i>
<i class="f8-icon fa fa-check-circle"></i>
<i class="f8-icon u8-rounded u8-overflow-hidden"><img alt="Framework8" src="images/f8.png"></i>

<i class="f8-icon">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 50 50">
    <path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
    </path>
  </svg>
</i>

Modifiers

There are different types of modifiers:

• Color
• Size
• Effect
• Ic

Color Modifiers

.f8-icon--color-{whitish,blackish,primary,accent,greenish,reddish,yellowish,bluish,inherit}

<i class="f8-icon f8-icon--ic-framework8 f8-icon--color-inherit"></i>
<i class="f8-icon f8-icon--ic-framework8 f8-icon--color-primary"></i>
<i class="f8-icon f8-icon--ic-framework8 f8-icon--color-accent"></i>

.f8-icon--color-fitful-agree: This color modifier is fitful! It lets the block to be whtish by default, and be blackish when it is a descendant element of an element with a class attribute value that contains “dark”. .f8-icon--color-fitful-against: This color modifier is the opposite of agree fitful color modifier.

<i class="f8-icon f8-icon--ic-framework8 f8-icon--color-fitful-against"></i>

<i style="--f8-icon-color: pink;" class="f8-icon f8-icon--ic-framework8"></i>

Size Modifiers

.f8-icon--size-{xs,sm,lg,100,inherit}

<i class="f8-icon fa fa-check-circle f8-icon--size-xs"></i>
<i class="f8-icon fa fa-check-circle f8-icon--size-sm"></i>
<i class="f8-icon fa fa-check-circle f8-icon--size-lg"></i>

.f8-icon--size-100: Sets the icon’s width/height/font-size to 100%, so that the block can cover its container.

<i class="f8-icon f8-icon--ic-framework8 f8-icon--size-100"></i>

<i style="width: 80px;" class="f8-icon f8-icon--ic-framework8 f8-icon--size-100"></i>

.f8-icon--size-inherit: Sets the icon’s width/height/font-size to 1em, so that the block can inherit its size from its container’s font-size.

<i class="f8-icon fa fa-check-circle f8-icon--size-inherit"></i>

<i style="--f8-icon-size: 100px;" class="f8-icon f8-icon--ic-framework8"></i>

State Modifiers

These states disappear the icon.

<i class="f8-icon f8-icon--ic-framework8 f8-icon--state-faded-out"></i>
<i class="f8-icon f8-icon--ic-framework8 f8-icon--state-zoomed-out"></i>

.f8-icon--state-inner: This modifier is useful when you like to put another icon inside another one! It’s more useful when we’re using the battery icon and its indicators should sit inside of it. This modifier only sets the icon’s position to absolute so that it can gently sit at the center of its parent icon.

<i class="f8-icon f8-icon--ic-battery f8-icon--color-inherit f8-icon--size-xs">
  <i style="--f8-icon-color: #00c5a2;" class="f8-icon f8-icon--ic-battery-life-100 f8-icon--size-xs f8-icon--state-inner"></i>
  <i class="f8-icon f8-icon--ic-battery-charger f8-icon--color-inherit f8-icon--size-xs f8-icon--state-inner"></i>
</i>

.f8-icon--state-inline: This modifier is useful when you’re using the icon among a text. It sets vertical-align: middle; bottom: .1em; CSS rules for the icon to sit gently among paragraphs.

<p>Lorem ipsum <i class="f8-icon f8-icon--size-inherit f8-icon--state-inline f8-icon--ic-framework8"></i> dolor sit amet</p>

Ic Modifiers

.f8-icon--ic-{framework8,counter,loader-text}

<i class="f8-icon f8-icon--ic-framework8"></i>

<i class="f8-icon f8-icon--ic-link"></i>

<i class="f8-icon f8-icon--ic-skull"></i>
<i class="f8-icon f8-icon--ic-heart"></i>
<i class="f8-icon f8-icon--ic-brain"></i>

<i class="f8-icon f8-icon--ic-package"></i>

<i class="f8-icon f8-icon--ic-hourglass"></i>

<i class="f8-icon f8-icon--ic-star-empty"></i>
<i class="f8-icon f8-icon--ic-star-full"></i>

<i class="f8-icon f8-icon--ic-fire"></i>
<i class="f8-icon f8-icon--ic-snow"></i>

<i class="f8-icon f8-icon--ic-power"></i>
<i class="f8-icon f8-icon--ic-sleep"></i>
<i class="f8-icon f8-icon--ic-awake"></i>

<i class="f8-icon f8-icon--ic-om"></i>

<i class="f8-icon f8-icon--ic-sound-on"></i>
<i class="f8-icon f8-icon--ic-sound-off"></i>

<i class="f8-icon f8-icon--ic-print-on"></i>
<i class="f8-icon f8-icon--ic-print-off"></i>

<i class="f8-icon f8-icon--ic-face-satisfied"></i>
<i class="f8-icon f8-icon--ic-face-happy"></i>
<i class="f8-icon f8-icon--ic-face-sad"></i>
<i class="f8-icon f8-icon--ic-face-impassive"></i>
<i class="f8-icon f8-icon--ic-face-angry"></i>
<i class="f8-icon f8-icon--ic-face-wink"></i>

<i class="f8-icon f8-icon--ic-calendar"></i>

<i class="f8-icon f8-icon--ic-battery"></i>
<i class="f8-icon f8-icon--ic-battery-charger"></i>
<i class="f8-icon f8-icon--ic-battery-life-100"></i> <!-- Only useful when used inside of the battery icon as an inner icon -->
<i class="f8-icon f8-icon--ic-battery-life-50"></i> <!-- Only useful when used inside of the battery icon as an inner icon -->
<i class="f8-icon f8-icon--ic-battery-life-10"></i> <!-- Only useful when used inside of the battery icon as an inner icon -->

<i class="f8-icon f8-icon--ic-loader-text"></i>
<i class="f8-icon f8-icon--ic-loader-spinner"></i>
<i class="f8-icon f8-icon--ic-loader-wave"></i>
<i class="f8-icon f8-icon--ic-loader-bars"></i>
<i class="f8-icon f8-icon--ic-loader-dots"></i>
<i class="f8-icon f8-icon--ic-loader-puff"></i>
<i class="f8-icon f8-icon--ic-loader-rings"></i>

The calendar icon also supports dynamic date text.

<i class="f8-icon f8-icon--ic-calendar" data-f8-date="29" title="December 29, 2016"></i>

The counter icon can also count any element that has its counter-increment style value to f8-icon-counter.

<ol style="list-style-type: none;">
  <li style="counter-increment: f8-icon-counter;"><i class="f8-icon f8-icon--ic-counter"></i> Item One</li>
  <li style="counter-increment: f8-icon-counter;"><i class="f8-icon f8-icon--ic-counter"></i> Item Two</li>
</ol>

All Modifiers Together

Now let’s combine all modifiers together to build unique and beautiful styles.

<i style="width: 60px;" class="f8-icon f8-icon--ic-framework8 f8-icon--size-100"></i>
<i style="width: 60px;" class="f8-icon f8-icon--ic-loader-text f8-icon--size-100"></i>
I <i style="--f8-icon-color: pink;" class="f8-icon f8-icon--size-inherit f8-icon--state-inline f8-icon--ic-heart"></i> YOU

Combine with Other Blocks

Now let’s combine the block with others to get even more awesome styles.

You can use padding for the icon to force the inner SVG or IMG have some more space from the edges. In our example here we’ve used the .u8-p utility class.

<i style="width: 100px;" class="f8-icon f8-icon--size-100 f8-icon--ic-framework8 u8-p"></i>

You can also use other utility classes to style even font icons in different ways.

<div style="--my-size: 100px; width: var(--my-size); height: var(--my-size);" class="u8-d-flex-inline u8-bg-color-fitful-against-alpha-hover u8-transition u8-p">
  <i style="font-size: calc(var(--my-size) / 2)" class="f8-icon f8-icon--size-100 fa fa-user"></i>
</div>

<i class="f8-icon f8-icon--size-xs f8-icon--color-reddish f8-icon--state-inline f8-icon--ic-star-full"></i> 5.0 (72)