how to force non-square font awesome social icons

  • Resolved the_briny

    (@the_briny)


    9 years, 5 months ago

    I am using an Apex child theme on my blog. With the most recent update to Apex, I noticed that the social icons all use “square” versions of the default Font Awesome icons. I prefer the icons without the -square suffix, so I’m wondering what the cleanest, most efficient way to tell my theme to use them in place of the square ones might be. I found this code in Apex’s functions file: 

    // icons that should use a special square icon
	    $square_icons = array('linkedin', 'twitter', 'vimeo', 'youtube', 'pinterest', 'reddit', 'tumblr', 'steam', 'xing', 'github', 'google-plus', 'behance', 'facebook');

    and this bit, a few lines later:

    // get the square or plain class
	            if ( in_array( $active_site, $square_icons ) ) {
		            $class = 'fa fa-' . $active_site . '-square';
	            } else {
		            $class = 'fa fa-' . $active_site;
	            }

    but I’m not sure what I need to put in my child theme’s functions file to accomplish what I want to do.

    In case it helps to see the above code in context, here’s the relevant section from the functions file:

    // output social icons
if( ! function_exists('ct_apex_social_icons_output') ) {
    function ct_apex_social_icons_output($source) {

        // get social sites array
        $social_sites = ct_apex_social_array();

	    // icons that should use a special square icon
	    $square_icons = array('linkedin', 'twitter', 'vimeo', 'youtube', 'pinterest', 'reddit', 'tumblr', 'steam', 'xing', 'github', 'google-plus', 'behance', 'facebook');

        // store the site name and url
        foreach ( $social_sites as $social_site => $profile ) {

            if ( strlen( get_theme_mod( $social_site ) ) > 0 ) {
                $active_sites[$social_site] = $social_site;
            }
        }

        // for each active social site, add it as a list item
        if ( ! empty( $active_sites ) ) {

            echo "<ul class='social-media-icons'>";

            foreach ( $active_sites as $key => $active_site ) {

	            // get the square or plain class
	            if ( in_array( $active_site, $square_icons ) ) {
		            $class = 'fa fa-' . $active_site . '-square';
	            } else {
		            $class = 'fa fa-' . $active_site;
	            }

                if ( $active_site == 'email' ) {
                    ?>
                    <li>
                        <a class="email" target="_blank" href="mailto:<?php echo antispambot( is_email( get_theme_mod( $key ) ) ); ?>">
                            <i class="fa fa-envelope" title="<?php _e('email icon', 'apex'); ?>"></i>
                        </a>
                    </li>
                <?php } else { ?>
                    <li>
                        <a class="<?php echo $active_site; ?>" target="_blank" href="<?php echo esc_url( get_theme_mod( $key ) ); ?>">
                            <i class="<?php echo esc_attr( $class ); ?>" title="<?php printf( __('%s icon', 'apex'), $active_site ); ?>"></i>
                        </a>
                    </li>
                <?php
                }
            }
            echo "</ul>";
        }
    }
}

    Any insight here would be greatly appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Don’t mess with the code, just override the content properties using CSS. Add these rules to the end of your child theme’s style.css file:

    .fa-twitter-square:before {
   content: "\f099";
}

.fa-google-plus-square:before {
   content: "\f0d5";
}

.fa-pinterest-square:before {
   content: "\f0d2";
   /* or use "\f231" */
}

.fa-tumblr-square:before {
   content: "\f173";
}

.fa-steam-square:before {
   content: "\f1b6";
}

    These rules will switch the content of the square icons to the normal ones.

    Theme Author Ben Sibley

    (@bensibley)

    Thanks for choosing Apex!

    The cleanest way would be to first copy the function into your child theme’s functions.php file. As you can see in the code above, Apex will only use its version of the function if it is not already defined. This means, you can define it in your child theme instead, and avoid editing the files directly in Apex.

    Once you’ve copied over the function, there are a few ways to avoid using square icons, but I think this would be easiest:

    if ( in_array( $active_site, $square_icons ) ) {
  $class = 'fa fa-' . $active_site;
} else {
  $class = 'fa fa-' . $active_site;
}

    All I did was update the second line there to make the square icons use the non-square classes too. This way, the array is preserved if you ever decide to switch back, but now none of the icons will use a square version.

    Thread Starter the_briny

    (@the_briny)

    That’s exactly what I needed! Thanks so much, Ben, for your quick response and detailed explanation.

    Thread Starter the_briny

    (@the_briny)

    Thanks for piping in, too, CrouchingBruin.

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome!

    Don’t hesitate to contact me if anything else comes up, I’m happy to help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘how to force non-square font awesome social icons’ is closed to new replies.