Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 How to add Font Awesome icons?

I was wondering how I could add Font Awesome icons as macros for my site.

I tried putting in the code to my <head> tags, and editing it in for macro but it isn't working. The link to my site is here:

and i'm working on testskin1.
Need to put the CSS for font awesome in your head tags, then make sure that your font in the CSS itself for that is set to Font Awesome.

Also, change the macro from the image HTML to the HTML that font-awesome uses. My site does the same thing if you want to look

This post has been edited by GMaster479: Oct 12 2016, 10:47 PM

user posted image
Could I see it?

In the head tags, I have:

<title><% TITLE %></title>
<link rel="stylesheet" href="">
<% CSS %>

Am I supposed to put something else there to signify the font to be used?

And I was testing out the macro, I tried using the image by copying it in and that didn't work and after that I used the unicode but that didn't work. And even when I tried using:

<i class="fa fa-exclamation-circle" aria-hidden="true"></i>

that didn't work.

I downloaded the .css and tried copy and pasting that into my style sheet but it didn't make a difference either.
That won't work. My link is in my signature.

At the top of your CSS you need to find

body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #222; margin:0px;

and change the font family part to:

font-family: Arial, "FontAwesome", sans-serif;

That needs to be in there. Then make sure you are replacing the correct macro in your skin.

EDIT: Update the 4.4.0 in the line of code in the HTML to 4.6.3

This post has been edited by GMaster479: Oct 12 2016, 10:57 PM

user posted image
Okay! That made it work for one of them but the one for the polls isn't showing up.

Also, what do you mean by making sure that I'm replacing the correct macro?
ACP -> Skins and Templates -> Macros

Find the one with the word or image you're trying to replace or add to and replace it.

For the polls, you might have to go to ACP -> System Settings -> Topics, Posts, and Polls and change the word Poll to the HTML for FontAwesome

EDIT: Going to bed. Good luck getting it to work I'll help more tomorrow if need be

EDIT2: John why in the heck is Verdana still the font for .quick-edit textarea on here?

This post has been edited by GMaster479: Oct 12 2016, 11:07 PM

user posted image
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll