Fontawesome list icons for unordered lists

[milkyway]

Hi folks,

I'm trying to exchange the standard list icons for unordered lists (e.g. the circle) with fontawesome icons in certain cases. The theme on this site is Outreach Pro.

I've done the same (on the sample theme, on another site) a few years back. I vaguely remember that it took a lot of fiddling to find a working solution (= a solution which a. actually displays the font awesome icons, and b. does not display the standard bullet points at the same time).

Now I've copied the code I've been using back then to the style.css of this Outreach site - and it's not loading the fontawesome icons, just showing that weird symbol that is always shown if a character isn't known.

I'm loading the fontawesome font in the functions.php, and when I use fontawesome icons elsewhere on the site, they are loading just fine - so it must be something about this particular piece of code with regards to the unordered lists.

The only difference between the site it was working on back then (apart from updates in Genesis, obviously) is that on that older site, I was using CDN to load Fontawesome, but on the current site, I'm hosting them locally due to EU privacy issues.

The style.css code is below:

/* Lists with fontawesome icons as bullets */
ul.icon
{
	list-style-type: none;
}

ul.icon li
{
	text-indent: -1.4em;
}

ul.icon li:before
{
	font-family: FontAwesome;
	float: left;
	width: 1.4em;
}

ul.icon li.paperclip,
ul.icon li.checkmark,
ul.icon li.star,
ul.icon li.bulb,
ul.icon li.filetexto,
ul.icon li.plus {
    list-style-type: none;
}

ul.icon li.paperclip:before { content: "\f0c6"; }
ul.icon li.checkmark:before { content: "\f00c"; }
ul.icon li.star:before { content: "\f005"; }
ul.icon li.bulb:before { content: "\f0eb"; }
ul.icon li.plus:before { content: "\f067"; }
ul.icon li.filetexto:before { content: "\f0f6"; }

And here's how I'm trying to load them in a blog post (again, copied from the backup of the site which was working back then):

<ul class="icon">
<li class="paperclip">blub</li>
<li class="checkmark">blub</li>
<li class="star">third item</li>
<li class="bulb">and a bulb</li>
</ul>

Any ideas or suggestions welcome - I'm not set on this particular solution, I just want the flexibility to use certain list icons in certain cases, but the standard bullets if nothing else is specified.

Thanks!

Milkyway

[Victor Font]

What version of FontAwesome are you using? I don't think the latest version uses the family-name "FontAwesome" any longer. I use the Pro version and all the family-names are different.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[milkyway]

Hi Victor,

This possibility didn't even occur to me... 😀

I'm using FontAwesome 5.3.1 on this site. Below is the relevant code from my functions.php:

// Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
    wp_enqueue_style( 'font-awesome-free', '/fontawesome-free-5.3.1-web/css/all.css' );
}

In the older project, I had been using 4.7.0 (and included it via maxcdn.bootstrapcdn.com).

Do you happen to know what the family name for the Solid FontAwesome fonts is?

My (vague) guess at this point is that I should have included the @fontface part for the fontawesome font, as I did for my other locally hosted fonts. I didn't need this in my older project and the fontawesome icons within the posts etc are loading fine, too, but maybe this is now required to load them as list icons?

I've tried adding the following to my style.css:

/* fontAwesome Solid */
@font-face {
  font-family: 'FontAwesomeSolid';
  font-style: normal;
  font-weight: 900;
  src: url('../../../fontawesome-free-5.3.1-web/webfonts/fa-solid-900.eot'); /* IE9 Compat Modes */
  src: local('Font Awesome Solid'), local('FontAwesome-Solid'),
       url('../../../fontawesome-free-5.3.1-web/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../fontawesome-free-5.3.1-web/webfonts/fa-solid-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../fontawesome-free-5.3.1-web/webfonts/fa-solid-900.woff') format('woff'), /* Modern Browsers */
       url('../../../fontawesome-free-5.3.1-web/webfonts/fa-solid-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../fontawesome-free-5.3.1-web/webfonts/fa-solid-900.svg#FontAwesomeSolid') format('svg'); /* Legacy iOS */
}

And then changed the font-family call in the style.css to

ul.icon li:before
{
	font-family: 'FontAwesomeSolid';
	float: left;
	width: 1.4em;
}

but this hasn't solved the problem.

As you might have guessed, my css skills are mediocre at best - I can understand it when I see it (well, most of the time), but piecing it together myself is a different story.

I really appreciate your help!

Milkyway

[Author]

Posts