PubWriter Safe Icons (Bootstrap 5)

As of 2022, I'm currently favoring the BS5 Icon Set.

All you need to do is link to the CDN for the stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">

There are several key advantages to using icons over images:

1. You change the size and color on the fly, like this:

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>

2. 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.

3. Icons are TINY files which allow your website to load much faster.

Pubwriter supports most major icon toolsets including:

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

Prefer Emojis?

Open Iconic

Open Iconic Icons

Font Awesome 5 Icons

See: https://fontawesome.com/cheatsheet

Font Awesome Icons

Google Material Icons

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