0
 function addscFontAwesome($atts) {
    extract(shortcode_atts(array(
    'type'  => '',
    'size' => '',
    'rotate' => '',
    'flip' => '',
    'pull' => '',
    'animated' => '',
    'class' => '',

    ), $atts));

    $classes  = ($type) ? 'fa-'.$type. '' : 'fa-star';
    $classes .= ($size) ? ' fa-'.$size.'' : '';
    $classes .= ($rotate) ? ' fa-rotate-'.$rotate.'' : '';
    $classes .= ($flip) ? ' fa-flip-'.$flip.'' : '';
    $classes .= ($pull) ? ' pull-'.$pull.'' : '';
    $classes .= ($animated) ? ' fa-spin' : '';
    $classes .= ($class) ? ' '.$class : '';

    $theAwesomeFont = '<i class="fa '.esc_html($classes).'"></i>';

    return $theAwesomeFont;
}

add_shortcode('icon', 'addscFontAwesome');

//usage [icon type="facebook"]

The problem is whatever I insert in the icon type, it always shows star (and that's because in the class attribute there's "fa-star" in it), after removing the "fa-star" I have tried dozen of modification/alternation so that my inserted icon type would show but it doesn't work. I guess I am not seeing it straight, Any help would be appreciated.

EDIT I'm working on a localhost

1 Answer 1

1

I tested your code, and it worked for me. Is it possible that your server doesn't support the extract function? Using extract is frowned upon in PHP now. This is the recommended way of extracting shortcode attributes:

function addscFontAwesome($atts) {

    $args = shortcode_atts(
        array(
            'type'  => '',
            'size' => '',
            'rotate' => '',
            'flip' => '',
            'pull' => '',
            'animated' => '',
            'class' => '',
        ),
        $atts,
        'icon'
    );

    $classes  = ($args['type']) ? 'fa-'.$args['type']. '' : 'fa-star';
    $classes .= ($args['size']) ? ' fa-'.$args['size'].'' : '';
    $classes .= ($args['rotate']) ? ' fa-rotate-'.$args['rotate'].'' : '';
    $classes .= ($args['flip']) ? ' fa-flip-'.$args['flip'].'' : '';
    $classes .= ($args['pull']) ? ' pull-'.$args['pull'].'' : '';
    $classes .= ($args['animated']) ? ' fa-spin' : '';
    $classes .= ($args['class']) ? ' '.$args['class'] : '';

    $theAwesomeFont = '<i class="fa '.esc_attr($classes).'"></i>';

    return $theAwesomeFont;
}
add_shortcode('icon', 'addscFontAwesome');

Make sure you're using the latest version of Font Awesome. Here's the code I'm using:

function nateallen-font-awesome() {
    wp_enqueue_style( 'nateallen-font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css', array(), '4.4.0' );
}
add_action( 'wp_enqueue_scripts', 'nateallen-font-awesome' );
8
  • 1
    +1 for not using extract ;-) I would tend to use esc_attr to escape the class attribute, instead of esc_html, even though they're almost the same. I would also add the third parameter of shortcode_atts. Also use prefixed shortcode name. But these are just my personal opinions ;-)
    – birgire
    Sep 30, 2015 at 13:26
  • 1
    @birgire Good suggestions, thank you. I edited the code to include esc_attr and the $shortcode parameter. I left the shortcode name the same though, but he can change that if he wants (it is very generic and could conflict with another shortcode easily).
    – Nate Allen
    Sep 30, 2015 at 13:36
  • Sorry I forgot to mention, I am working on a localhost. btw [icon type="facebook"] [icon type="car"] or even [icon type="calendar"] works I mean displays FA icons but [icon type="map"] [icon type="opera"] [icon type="hourglass"] these doesn't work. I was hoping I could get all the FA icons through this shortcode. Is there any particular reasons for not working! Sep 30, 2015 at 14:38
  • So when you do [icon type="facebook"] it works, but [icon type="map"] doesn't? When you view the source code, what does it show when it doesn't work?
    – Nate Allen
    Sep 30, 2015 at 14:43
  • In Page Source it's showing <i class="fa fa-opera"></i> which is correct syntax for viewing FA icon. No error on the console either. Does Opera, Hourglass and map Icon display on your end? I guess something have to do with my end. Sep 30, 2015 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.