PubWriter Safe Icons (Bootstrap 4)

There are several key advantages to using icons over images:

  1. The is the ability to change the size and color on the fly, like this:

cloud favorite attachment computer

You can specify the color using span class (noted via on page style or an external stylesheet):

<span class="blood"><i class="material-icons">favorite</i> </span>
  1. The icons will match the Font color of your site. This becomes especially valuable when you want to add a dark mode switch to your site.
  2. Icons are TINY files which allow your website to load much faster.

Prefer Emojis?

Pubwriter supports most major icon toolsets including:

  1. Fontawesome
  2. Open Iconic
  3. Devicons
  4. Material Design Icons
  5. Forkawesome
  6. Iconify - 50,000 icons!

Font Awesome Cheatsheets (cut & paste html snippets)

Note: Fontawesome requires <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"> in your CSS.


Regular

Solid

Brand

Icomoon

IcoMoon

SVGs (to help you find the icon you want)

SVGs also offer the flexibility of changing size and color and with SVGs, you aren't limited to the icons in the toolset above. A tutorial is forthcoming.

PNGs

More (offsite) Resources

Open Iconic

Open Iconic Icons

Font Awesome 5 Icons

See: https://fontawesome.com/cheatsheet

Font Awesome Icons



Google Material Icons

computer Google Material Icons

cloud
favorite
attachment
computer
traffic
face
mood terrain school send stars star style iso android check time toys work

Icon Animation

With all FontAwesome Icons, we can increase the size of the icons and/or spin 'em!

Or a ball bounce

Or make a heartbeat...

Or heart burst...

Call attention to something important...

Or ask for a review...

Scroll Up

More Animation Options

Explore Further