Bug – anchor tags wrapped on Font Awesome icon disappear

  • Steps to reproduce:
    Use a Font Awesome enabled theme. I’m using Genesis.
    Create a new page/post.
    Edit in text mode, paste a font awesome icon code, example PDF icon.
    Place an anchor tag link around Font Awesome code, example to a PDF document.
    Click on visual tab. Then click on text tab. The anchor tag has now been removed.

    This is extremely frustrating behavior. I was using the default editor too, no editor enhancement plugins.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Linda

    (@lindamork)

    Automattic Happiness Engineer

    Hey JasonBC,

    How is Font Awesome enabled? By plugin or did you enqueue in functions.php? It would be helpful if you included the code you tried to use in the text editor. The text editor doesn’t support <i></i> so it’ll strip them out.

    I had this issue.

    Use this in your functions.php or plugin.

    // Create FontAwesome Shortcode
function fontawesome_func( $atts ) {
	$atts = shortcode_atts(
		array(
			'icon' => 'icon',
		), $atts, 'fa' );

	return '<i class="' . $atts['icon'] .'"></i>';
}
add_shortcode( 'fa', 'fontawesome_func' );

    Now simply input this shortcode wherever you please.

    [fa icon=”fa fa-phone”]

    Hi Jarod,

    Thanks for your help .. yes it works .. !

    Thanks !!

    Good to hear.

    You can also use fontawesome in pseudo classes. This is very useful!

    a:before {
font-family:fontawesome;
content:"\f29d";
}

    You can grab the unicode from the icon page. This is located just beneath the varying sizes of said icon.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Bug – anchor tags wrapped on Font Awesome icon disappear’ is closed to new replies.