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

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' );
| improve this answer | |
  • 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 '15 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 '15 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! – Ashiquzzaman Kiron Sep 30 '15 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 '15 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. – Ashiquzzaman Kiron Sep 30 '15 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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