FontBotamochi Examples

You can place Font Botamochi icons just about anywhere with the <i> tag

Example: basic icon fb-t-shirt

You can place Font Awesome icons just about anywhere using the CSS Prefix fb and the icon's name. Font Botamochi is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

<i class="fb fb-t-shirt"></i> fb-t-shirt
  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

fb-lg

fb-2x

fb-3x

fb-4x

fb-5x

To increase icon sizes relative to their container, use the fb-lg (33% increase), fb-2x, fb-3x, fb-4x, or fb-5x classes.

<i class="fb fb-t-shirt fb-lg"></i> fb-lg
<i class="fb fb-t-shirt fb-2x"></i> fb-2x
<i class="fb fb-t-shirt fb-3x"></i> fb-3x
<i class="fb fb-t-shirt fb-4x"></i> fb-4x
<i class="fb fb-t-shirt fb-5x"></i> fb-5x
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Use fb-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fb fb-shirt fb-fw" aria-hidden="true"></i>&nbsp; Shirt</a>
  <a class="list-group-item" href="#"><i class="fb fb-jacket fb-fw" aria-hidden="true"></i>&nbsp; Jacket</a>
  <a class="list-group-item" href="#"><i class="fb fb-pants fb-fw" aria-hidden="true"></i>&nbsp; Pants</a>
  <a class="list-group-item" href="#"><i class="fb fb-socks fb-fw" aria-hidden="true"></i>&nbsp; Socks</a>
</div>
  • Combustibles
  • Incombustible
  • PET bottoles
  • Cans

Use fb-ul and fb-li to easily replace default bullets in unordered lists.

<ul class="fb-ul">
  <li><i class="fb-li fb fb-combustible"></i>Combustibles</li>
  <li><i class="fb-li fb fb-incombustible"></i>Incombustibles</li>
  <li><i class="fb-li fb fb-pet-bottole"></i>PET bottoles</li>
  <li><i class="fb-li fb fb-can"></i>Cans</li>
</ul>

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Use fb-border and fb-pull-right or fb-pull-left for easy pull quotes or article icons.

<i class="fb fb-backpack fb-3x fb-pull-left fb-border" aria-hidden="true"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning&mdash; So we beat on, boats against the
current, borne back ceaselessly into the past.

Loading example (with fb-spinner icon) Loading (with fb-circle-o-notch icon) Loading example (with fb-refresh icon) Loading example (with fb-cog icon) Loading example (with fb-spinner icon)

Use the fb-spin class to get any icon to rotate, and use fb-pulse to have it rotate with 8 steps.

<i class="fb fb-hexagon fb-spin fb-3x fb-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fb fb-can fb-spin fb-3x fb-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fb fb-arrow-left fb-spin fb-3x fb-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fb fb-hoodie fb-spin fb-3x fb-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fb fb-spade fb-pulse fb-3x fb-fw"></i>
<span class="sr-only">Loading...</span>

Note: CSS3 animations aren't supported in IE8 - IE9.

  normal
  fb-rotate-90
  fb-rotate-180
  fb-rotate-270
  fb-flip-horizontal
  fb-flip-vertical

To arbitrarily rotate and flip icons, use the fb-rotate-* and fb-flip-* classes.

<i class="fb fb-tie"></i> normal<br>
<i class="fb fb-tie fb-rotate-90"></i> fb-rotate-90<br>
<i class="fb fb-tie fb-rotate-180"></i> fb-rotate-180<br>
<i class="fb fb-tie fb-rotate-270"></i> fb-rotate-270<br>
<i class="fb fb-tie fb-flip-horizontal"></i> fb-flip-horizontal<br>
<i class="fb fb-tie fb-flip-vertical"></i> fb-flip-vertical
fb-tie on fb-t-shirt-long
fb-drill on fb-hexagon
fb-can2 on fb-diamond
fb-cancel on fb-spray

To stack multiple icons, use the fb-stack class on the parent, the fb-stack-1x for the regularly sized icon, and fb-stack-2x for the larger icon. fb-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="fb-stack fb-lg">
  <i class="fb fb-diamond-o fb-stack-2x"></i>
  <i class="fb fb-can2 fb-stack-1x"></i>
</span>
fb-can2 on fb-diamond-o <br>
<span class="fb-stack fb-lg">
  <i class="fb fb-hexagon fb-stack-2x"></i>
  <i class="fb fb-drill fb-stack-1x fb-inverse"></i>
</span>
fb-drill on fb-hexagon<br>
<span class="fb-stack fb-lg">
  <i class="fb fb-diamond fb-stack-2x"></i>
  <i class="fb fb-can2 fb-stack-1x fb-inverse"></i>
</span>
fb-can2 on fb-diamond<br>
<span class="fb-stack fb-lg">
  <i class="fb fb-spray fb-stack-1x"></i>
  <i class="fb fb-cancel fb-stack-2x text-danger"></i>
</span>
fb-spray on fb-cancel