Jump to content


Photo
- - - - -

FontAwesome Code Disappears When changing in "Visual" view in editor

Font Awesome

Best Answer Danny , 24 April 2013 - 10:15 AM

There is a product in the PageLines store that allows you to use font awesome via a shortcode.

 

http://www.pagelines...font-shortcode/

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 18 February 2013 - 08:23 AM

In the text view Im creating the following code

 

<ul class="icons">

<li><i class="icon-ok"></i> Lists</li>

<li><i class="icon-ok"></i> Buttons</li>

<li><i class="icon-ok"></i> Button groups</li>

<li><i class="icon-ok"></i> Navigation</li>

<li><i class="icon-ok"></i> Prepended form inputs</li>

</ul>

 

As per the FontAwesome code.

 

But when I click on Visual view and the back to Text View in the content editor, the the code for the ticks disappears. 

 

That is  this part:    <i class="icon-ok"></i>   disappears.

 

Is this a bug?   Is there a way to fix this ?

 

THanks



#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 18 February 2013 - 09:52 AM

The visual editor does not recognise <I> as valid code and strips it.
Also there is no need to escape your quotes like that

#3 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 20 February 2013 - 10:50 AM

what do you mean "escape your quotes".

 

I pretty much have to add that code in throughout my entire page (I have a lot of ticks), every time I use the visual editor.  So is there a solution to this problem?  



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 February 2013 - 11:51 AM

To put it very simple, the Visual editor for Wordpress is rubbish and the first thing I do after I have finished the installation of Wordpress, is to disable the visual editor.

 

So don't use the visual editor, it causes of kinds of issue with HTML, especially switching from one to the other. If you disable the visual editor, this should resolve your issue.



#5 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 20 February 2013 - 01:00 PM

The element <I> is not supported by the wp visual editor.
There is no fix or workaround other than do not use the visual editor with HTML

#6 bbudeck

bbudeck

    Newbie

  • Members
  • 7 posts
  • LocationFrankfurt
  • Framework Version:Pro
  • Country: Country Flag

Posted 24 April 2013 - 10:07 AM

I have the same problem. Even installing plugins that promise to "keep your HTML untouched" didn't prevent WP from deleting an empty <i> tag. I found that if the <i> tags enclosed some content (whitespace is not working) the visual editor mode won't delete it (WP 3.5.1). At least for me :)

So now I use <i class="icon-book"><span style="color: #fff;">.</span></i> - pretty crappy workaround. Authors in Visual mode still delete this "invisible" content by accident.
I would love to see someone write a shortcode for this: [i class="icon-book"] so far nothing like this seems to be available or I didn't get it running.

I wonder if this would collide with the pagelines css class already in use though.

 



#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 10:15 AM   Best Answer

There is a product in the PageLines store that allows you to use font awesome via a shortcode.

 

Please Login or Register to see this Hidden Content



#8 bbudeck

bbudeck

    Newbie

  • Members
  • 7 posts
  • LocationFrankfurt
  • Framework Version:Pro
  • Country: Country Flag

Posted 24 April 2013 - 11:36 AM

perfect, thank you Danny. just bought the Plugin and going to install.



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 11:40 AM

No problem, happy to help!



#10 dalia

dalia

    Newbie

  • Members
  • 5 posts
  • LocationBarcelona
  • Framework Version:3.5.1
  • Country: Country Flag

Posted 10 June 2013 - 03:45 PM

Hi, Bought this plugin yesterday, just what i was looking for by the way! 

 

I was wondering where I can find the list of possible css? I don't wan't to create any new if something good already exists

 

I have by the way just tested using these short codes in the header of the pagelines boxes and it works!!! Will make my life easier!

Thanks to the creator

D



#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 June 2013 - 07:24 PM

Hi Dalia,

 

I don't think there is a list of the css used in the plugin. But you can check with the author on their product support forum, they might be able to advise further.

Please Login or Register to see this Hidden Content

just select the plugin/section from the drop down and that will assign it to the relevant developer :-)







Also tagged with one or more of these keywords: Font Awesome