You can place Fontisto icons just about anywhere using the CSS Prefix fi and the icon’s name. Fontisto is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).
copy
<i class=“fi fi-twitter”></i>fi fi-twitter
<i class=“fi fi-facebook”></i>fi fi-facebook
<i class=“fi fi-instagram”></i>fi fi-instagram
Use the fi-spin class to get any icon to rotate, and use fi-pulse to have it rotate with 8 steps. Works well with fi-spinner, fi-spinner-refresh, and fi-spinner-fidget Use fi-border for easy article icons.
copy
<i class=“fi fi-circle-o-notch fi-spin”></i>fi fi-circle-o-notch fi-spin
<i class=“fi fi-spinner-fidget fi-spin”></i>fi fi-spinner-fidget fi-spin
<i class=“fi fi-spinner-refresh fi-spin”></i>fi fi-spinner-refresh fi-spin
<i class=“fi fi-spinner-rotate-forward fi-spin”></i>fi fi-spinner-rotate-forward fi-spin
<i class=“fi fi-propeller-4 fi-spin”></i>fi fi-propeller-4 fi-spin
<i class=“fi fi-spinner fi-pulse”></i>fi fi-spinner fi-pulse
To arbitrarily rotate and flip icons, use the fi-rotate- and fi-flip- classes
normal
fi-r-45
fi-r-90
fi-r-135
fi-r-180
fi-r-225
fi-r-270
fi-r-315
fi-f-horizontal
fi-f-vertical
copy
<i class=“fi fi-shield fi-r-45”></i>fi-r-45
<i class=“fi fi-shield fi-r-90”></i>fi-r-90
<i class=“fi fi-shield fi-r-135”></i>fi-r-135
<i class=“fi fi-shield fi-r-180”></i>fi-r-180
<i class=“fi fi-shield fi-r-225”></i>fi-r-225
<i class=“fi fi-shield fi-r-270”></i>fi-r-270
<i class=“fi fi-shield fi-r-315”></i>fi-r-315
<i class=“fi fi-shield fi-f-horizontal”></i>fi-f-horizontal
<i class=“fi fi-shield fi-f-vertical”></i>fi-f-vertical
Use fi-ul and fi-li to easily replace default bullets in unordered lists.
copy
<i class=“fi fi-checkbox-passive”></i>fi-list-circle
<i class=“fi fi-checkbox-active”></i>fi-list-ellipse
<i class=“fi fi-radio-btn-passive”></i>fi-list-rectangle
<i class=“fi fi-radio-btn-active”></i>fi-list-rectangle
To arbitrarily stack icons, use the fi-stack-(ellipse/curve/rectangle) classes
nodejs
ruby
python
copy
<i class=“fi fi-nodejs fi-stack ellipse”></i>fi fi-nodejs fi-stack ellipse
<i class=“fi fi-ruby fi-stack curve”></i>fi fi-ruby fi-stack curve
<i class=“fi fi-python fi-stack rectangle”></i>fi fi-python fi-stack rectangle
To arbitrarily bordered icons, use the fi-border-(ellipse/curve/rectangle) classes
dollar
euro
tl
copy
<i class=“fi fi-dollar fi-border ellipse”></i>fi fi-dollar fi-border ellipse
<i class=“fi fi-euro fi-border curve”></i>fi fi-euro fi-border curve
<i class=“fi fi-tl fi-border rectangle”></i>fi fi-tl fi-border rectangle