Font Awesome showing and not showing (concrete5)

Question

My website runs on Concrete5.

I wanted to add some more Font Awesome icon to an existing page, but it's not showing. Strange thing is, there already are icons on my webpage and they are showing...

However when I edit the block with the icons in it to check the HTML, there is no HTML/CSS saying the icons should be there!

When I add an icon in the content block in HTML, nothing shows. But when I add an icon with an HTML block it does show.

For instance the tree columns underneath the green picture show three green check boxes.

And this is what the content block says is in the block:

<p>Sessie 1</p>
<p>Analyse van je proces van vliegangst en je omslagpunt</p>
<p>Stoppen van de angst, piekeren en vervelende herinneringen</p>
<p>Praktische oefeningen voor thuis</p>

See the website here

As you can see, there is no font-awesome css in there. But icons are showing on the webpage. The css is also showing when you check the html of the page.

Now, if I would put

<p> <i class="fa fa-camera-retro"></i> test</p>

In the same block (a content block, in the html window). It won't show a camera. It would just show "test".

If I then go back to the content block and see what's in the html, it says

<p>test</p>

Now if I would put the same line of code in an HTML block, it does show the camera icon.

So there are two things happening:

Older font-awesome icons are showing on the webpage but not in the content blocks html.
New font-awesome icons can't be added through html in content blocks, but can in HTML blocks.

Edit: When I use this code:

<p class="fa fa-camera-retro"></p>

It does show in the content block. But then I can't simply add a symbol with some text, because the font will be from the font-awesome font.

the  tag still isn't working. so

<i class="fa fa-camera-retro"></i>

Gives nothing.

The icons only appear when there's text between the code:

<i class="fa fa-camera-retro">foo</i>

However, the editor changes the  tag then to an  tag. And 'foo' then has the font-awesome font. Not the font of my website.

****SOLUTION**** If I do it like this:

<p><i class="fa fa-camera-retro">&nbsp;</i> some text</p>

Everything works as I want.

Still, all the older font-awesome css from the website is missing from the content blocks, but it is rendering when I view the website in a browser. If anyone has a suggestion how that can be fixed?

some code would be helpful. which font awesome icons are you trying to include and where? — Ashesh
Kind of vague this question. What are you doing? Where do you enter it? I see the thumbs up, i see the check boxes, i see the quotation, and even the checks at your ul class in the text. What should I not see? — Dorvalla
It's my first time on stackoverflow. Sorry I wasn't that clear... I adjusted my question. — Mike Hoffmeister

Dorvalla Dorvalla · Accepted Answer · 2015-06-02T14:38:34

Ahh, I think I see your problem. You entered a new HTMLblock, and just pasted in the fa-camera-retro. FontAwesome works as a class and should be entered within a tag.

You can use the  tag for it, but also the  tag or whatever you want. It should be then something like

 (dont forget the extra fa class to make it appear as a font awesome.

Font Awesome showing and not showing (concrete5)

5 Answers