getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2018
getButterfly

UnicodeAwesome

UnicodeAwesome: Native Unicode icons to replace FontAwesome functionality

v1.0.0-beta

Manually crafted, tweaked and sized unicode entities to replace your custom fonts and SVGs. Each icon is hand-picked, sized to match the surrounding text, tweaked to look crisp and seamless, rotated to better illustrate its purpose, mixed, and, optionally, animated.

Why?

  • Because sometimes you just don't need FontAwesome for a handful of icons.
  • Because almost all icons in the FontAwesome library have a Unicode equivalent.
  • Because UnicodeAwesome is a tiny CSS library - there are no fonts, no images, no SVG and no JavaScript files.
  • Better readability.
  • Lighter than SVG.
  • 100% open-source.

Installation

Include ua.min.css in your project and you're ready to fly!

Usage examples

1. Use the Unicode entity inside a .ua-icon element:
<span class="ua-icon">&#128197;</span>

2. Use the icon class corresponding to your desired icon: <span class="ua-icon ua-times"></span>
Using this method makes sure your icons are mobile compatible, but they might not exist in the library.

Note: Use .ua-uw class to make the icons fixed size:
<span class="ua-icon ua-times ua-uw"></span>


UnicodeAwesome Class Icons
Click icon to get code


ua-plus

ua-times

ua-calendar

UnicodeAwesome Entity Icons
Click icon to get code


ua-times
📅
ua-calendar

ua-navigation

ua-navigation-alt

ua-navigation-alt

ua-navigation-alt
👁
ua-eye

ua-heart

ua-heart-empty

ua-heart-alt

ua-hearts
🔔
ua-bell
🔕
ua-bell-slash
🌐
ua-globe
🛒
ua-cart
💬
ua-comment

ua-plus
🔗
ua-link

ua-envelope
🖂
ua-envelope-alt
🏆
ua-trophy

ua-reload
🔃
ua-reload-alt

ua-star
🗸
ua-checkmark

ua-checkmark-alt

ua-checkmark-alt

ua-checkmark-alt

ua-checkmark-alt

ua-visible

ua-invisible
🛠
ua-wrench
🗑
ua-trash
🡥
ua-enlarge

ua-move-up-down

🔃 Reload (animated)
Reload (animated, alternate)