Best way to style icons (or text)?

Beaver Builder
1

Hi
I’m struggling to use some fontawsome icons in different colors inside a text in a tab. (I have added the necessary code to my child theme’s functions.php file as described here, a brilliant tip, by the way: http://fontawesome.io/get-started/)
When - in text mode in a tab - I try to add for instance a blue check-box icon using this code
<span class="fa fa-check-square-o fa-2x” style=“color:#0000ff” ></span>
the color part is deleted and the icon appears in black:
<span class=“fa fa-check-square-o fa-2x” style=”></span>
I’ve experimented quite a bit an finally managed to get in this (twh spans inside each other didn’t work):
<span style=“color: #0000ff; float: right;”><i class=“fa fa-check-square-o fa-3x”></i> Forholdsvis enkelt</span>
BUT: If I then go back to edit that tab again, parts of the code is deleted.
So - what do you recommend?
Thanks,
Kjetil
PS The result is like this, beside the top title and in a tab below the gallery: http://www.in2it.no/demo5/gardasjoen-via-ferrata-x2/

2

Correction: After trying another edit the code stays - some times. So with some very careful placement it works. Still - some times - a code like
<span style=“color: #0000ff; float: right;”><i class=“fa fa-check-square-o fa-3x”></i> Forholdsvis enkelt</span>
is reduced to
<i class=“fa fa-check-square-o fa-3x”></i>
Could you please give some advice on best practice here?
Thanks,

3

Hey Kjetil,

That is because either the code is wrong or it’s missing something(a quotation mark, semicolon, used an equal sign instead of a colon and etc.). This happens on the regular WP Text Editor as well.

I don’t really recommend inline styling though. I would suggest placing classes on those span tags, then place the styling on your theme stylesheet.

Hope this helps!

Ben

4

Hi
I figured (after a while) it had to be done some way like that.
The problem is to find a way to insert the span and class (in text mode) without it being gone next time I edit that module.
I’ve tried to add code like this:
<span class=“fa-bla2”>hei1</span>
(with or without any text inbetween)
and in the stylesheet I’ve added this - which should work - theoretically:

.fa-bla2:after {
   font-family: FontAwesome;
   content: "\f046 Middels";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-size: 3em;
   color: #0000FF;
   float:right;
}

This should add a checkmark icon plus the word Middels.
I guess this a bit beyond what you’re supposed to help us out on, but if you have a tip it’s really appreciated.
Thanks,
Kjetil

5

Hi Kjetil,
I know a lot of people will groan and say ‘Not another plugin’ :slight_smile:
But I add this plugin to all my client sites.
It is from one of the WP core developers Andrew Oz and is very lightweight & the feature it has is that there is a check-box setting that stops <p> tags and <br> tags from being stripped away when you save (see full description of that feature below!)

https://wordpress.org/plugins/tinymce-advanced/

HTH, Dave

Stop removing the <p> and <br /> tags when saving and show them in the Text editor
This will make it possible to use more advanced coding in the HTML editor without the back-end filtering affecting it much. However it may behave unexpectedly in rare cases, so test it thoroughly before enabling it permanently. Line breaks in the HTML editor would still affect the output, in particular do not use empty lines, line breaks inside HTML tags or multiple <br /> tags.

6

Hey Kjetil,

I think the FontAwesome CSS already takes care of that, you can just use this:
<i class=“fa fa-check”></i>Middels
If you want to change the color:
<span style=“color: red;”><i class=“fa fa-check”></i>Middels</span>
Or you could place a span class there and add styling to it on your stylesheet. The Text Editor deletes any tag without a word/text in it. If you’re only going to place <i class=“fa fa-check”></i>, it gets deleted when you go back to the Visual tab. Same goes on the WP Text Editor. I would suggest using our HTML module for this. It would make it so much more easier.

Hope this helps.

Ben

7

Hi guys - thanks for your help

The Text Editor deletes any tag without a word/text in it.
That helped. I had to include the word in the style definition to make it float correctly with the icon, but adding a : (instead of Middels) actually looks fine - it doesn't float right and ends up after the title. Fine. @ Dave: Thanks a lot - it could be a very useful solution (though I really try to keep the use of plugins to a minimum when rebuilding our main site). The thing is, though, that this plugin seems only to keep just those few tags. For instance the span tag goes down the drain... :o) With your hint I also found an other plugin - https://wordpress.org/plugins/preserve-code-formatting/ - which could work, but again, an extra plugin... Here's the result - not finished, but for now - you'll find two blue checkboxes: http://www.in2it.no/demo5/via-ferrata-canyon/ Kjetil PS Ben: An html editor module wouldn't work in this case because one of the instances is in a tab... And - the weird thing is that most times even "empty" styling stays there, just not always. Thanks
8

No worries! Let us know if you need anything further! :slight_smile:

Ben