• Skip to main content
  • Skip to footer
  • Home
  • Our Work
  • About
  • Our Process
  • Reviews
  • Skills
  • Contact

Genesis Framework Developer And Designer Team

Genesis Developer and Designer Team For WordPress Websites

Make Your Own Fontawesome Shortcode For WordPress

April 13, 2015 by 3200 Creative Leave a Comment

Step 1: Copy and paste the following code into your functions.php file.


File: functions.php
-------------------

// Icon Shortcode Using Icomoon.io by 3200creative
// to use this shortcode use the following markup [fa-icon id="optional" type="arrow" size="24" color="#ff9900"]

function icon_func( $atts ) {
    $a = shortcode_atts( array(
        'type' => 'Add Icon Type',
        //ID is optional
        'id' => '',
        'size' => 'Add Size',
        'color' => 'Add Color',
    ), $atts );

    return '<span id="'."{$a['id']}".'" style="font-size:'."{$a['size']}".'px; color:'."{$a['color']}".';"class="fa fa-'."{$a['type']}".'"></span>';
}
add_shortcode( 'fa-icon', 'icon_func' );

Step 2: Paste the following shortcode into your post, page, or widget:

[fa-icon id=”optional” type=”arrows” size=”24″ color=”#ff9900″]

Example:
[fa-icon id=”optional” type=”arrows” size=”24″ color=”#ff9900″] [fa-icon id=”optional” type=”arrows” size=”44″ color=”rgb(46, 171, 226)”]

Shortcode fields:
id: Use this for a specific ID for the icon.
type: Head over to fontawesome and locate the icon you’d like to use. Paste the simple name of it here to display that icon.
type: Font size of the icon.
color: Hex or RGBa color of the icon.

Blog, Development, WordPress

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Footer

Genesis Framework Developer Team
Design, Developement, and Consulting Services
  • Our Work
  • Our Process
  • Skills
  • Reviews
  • About
  • Project Inquiry
  • Client Login
  • Client Resources
  • Contact Us

Copyright © 2023 - 3200 Creative
Genesis Framework Developer And Designer Team | Blog | Archives | Privacy Policy