Font Awesome Icons Fonts? [possible to select specific icons?]

Tagged: 

This topic contains 7 replies, has 3 voices, and was last updated by  mwdonnelly 7 years, 5 months ago.

Author Posts

mwdonnelly

Greetings,

I’m styling a theme that uses Font Awesome for icons for a list. I can select the icon in the CSS selector, but I can’t seem to figure out how to change the icon to a different one. I’ve looked at both Font and List…don’t know where else to look.

Thanks!


Sebastian

Hi there,

I’ve just been reading up on Font Awesome. It looks like you will have to change the font icon by changing some HTML in your theme. You might be able to do this by editing the page and switching the WordPress text editor to ‘Text’ view (the tab on the right). Then look for something like this:

<i class="fa fa-subway"></i>

And then change the name to the icon you want. E.g

<i class="fa fa-heartbeat"></i>

Does that seem doable?

Cheers,
Sebastian


mwdonnelly

I can’t seem to get the selector to choose the right content to edit the html. What am I doing wrong?

I was able to find the PHP code in the theme to change this, which means copying over GOBS of PHP functions to my child theme to make one little change to the FontAwesome icon. 🙁 Not fun! I’d rather change it in the HTML code if possible. Thoughts?


Abland

Hi, mwdonnelly,

I’m curious if this might work for you:

/* hide existing icons */
li i {
  visibility: hidden;
}

/* add new icons */
li:before {
  content: '\f006'; /* star icon */
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em; /* adjust as needed */
  color: #0074D9;
}

A list of values: http://astronautweb.co/snippet/font-awesome/


Sebastian

Thanks for sharing Abland! (I was wrong, there is a way to apply these icons via CSS with some raw code)

@mwdonnelly Abland has provided some custom CSS code that you could copy and paste into Microthemer’s custom code editor (see icon at top right of the interface). If it works (all list icons will become stars) then you can set the icon you want by changing this line:

content: '\f006'; /* star icon */

Specifically, you would change this: \f006 (star icon)
To something like this: \f00c (tick icon)

Microthemer doesn’t currently have a content CSS property in the interface. Or suggest :before and :after pseudo selectors in the wizard (hence Abland is giving you raw code to work with). But Font Awesome is reason alone for us to support these features so it will come in time.

If this approach doesn’t work as you expect please post a link to your site and I will help you troubleshoot.

Cheers,
Sebastian


mwdonnelly

Nope, that code totally broke my site. I think I’ll stick with the copy/paste/edit the default value array in functions.php. At very least it solves the problem. But I would love to see some sort of way to address FontAwesome content properties (or even general content properties) in the plugin sometime in the future.


Abland

Hi, mwdonnelly,

I’m sorry that happened – the code I posted was very general so it applied to every ordered and unordered list on your site.

You would want them to be more specific to your needs, for instance if your unordered list was class “my-list” then you would try:

ul.my-list li i {
  visibility: hidden;
}
ul.my-list li:before {
  content: '\f006';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #0074D9;
}

Targeting the specific class would leave the rest of your lists untouched.


mwdonnelly

Thanks Abland. The theme I’m using automatically selects the icon based upon the article post format (the theme has two–standard and video). I would love to be able to change the content using CSS, but looking through the site…I’m not sure if this is going to work due to the default values of the FA icons tied to those specific post formats. I went through functions.php in the parent theme, copied the function that set the default icons to my desired choices, then pasted those functions into the functions.php in my child theme. It did solve the problem. Thanks for the advice, though. I WILL be able to set icons in other ULs this way!

The theme I purchased has needed quite a bit of fine tuning to make work, and I’m glad I’ve been able to root out the css needed to make it work via Microthemer.

Best,

Margaret

You must login or register to reply to this topic.