Adding one more Social Icon to Customizr Theme

  • Resolved faalbane

    (@faalbane)


    11 years, 1 month ago

    Alright, so, I built a site with the Customizr theme (it’s awesome). Basically, I’m trying to add an extra social link/icon to go along with the already built-in social links options.

    Here’s where I’m coming from: https://www.themesandco.com/snippet/adding-custom-social-profile-link-icon-header/

    I pasted the first part of the code:

    add_filter ('tc_social_in_header' , 'vimeo_in_header');
function vimeo_in_header($resp) {
    //class added if not resp
    $class         =  ('resp' == $resp) ? '':'span5'
    ?>
        <div class="social-block <?php echo $class ?>">
            <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_header') ) : ?>
                   <?php echo tc__f( '__get_socials' ) ?>
                   <a href="#my_social_profile_link" title="Follow me"></a>
               <?php endif; ?>
        </div><!--.social-block-->
    <?php
}

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

    into the functions.php file (changing the “#my_social_profile_link” with (my social profile link).

    Next, I pasted:

    .vimeo-icon:before {
    content: “\\f212”;
    }

    with the content line replaced with: “content: url(‘https://www.yoursite.com/style/images/my-icon.png&#8217;);
    “

    and I don’t see anything, no option either. Can someone help?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter faalbane

    (@faalbane)

    (the second code snippet I pasted in the Custom CSS section of the Customizr tab)

    Thread Starter faalbane

    (@faalbane)

    (also, just for clarification, I replaced “://www.yoursite.com/style/images/my-icon.png” in the second code snippet with the PNG image I’m planning to use for the social icon)

    Thread Starter faalbane

    (@faalbane)

    that second code snippet is:

    .vimeo-icon:before {
 content: url('https://www.mysite.com/style/images/my-icon.png');
 }
    Thread Starter faalbane

    (@faalbane)

    hey guys, just in case anyone visits this page in the future, I figured it out!

    In the functions.php file (Appearance>Editor), I pasted this code (thanks to Nicolas from Customizr):

    add_filter ('tc_social_in_header' , 'vimeo_in_header');
function vimeo_in_header($resp) {
    //class added if not resp
    $class         =  ('resp' == $resp) ? '':'span5'
    ?>
        <div class="social-block <?php echo $class ?>">
            <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_header') ) : ?>
                   <?php echo tc__f( '__get_socials' ) ?>
                   <a class="social-icon custom-icon" href="SITE URL YOU WANT THE ICON TO POINT TO" title="WHAT YOU WANT THE ICON TO SAY WHEN MOUSE HOVERS OVER IT" target="URL OF THE IMAGE YOU WANT FOR THE ICON"></a>
               <?php endif; ?>
        </div><!--.social-block-->
    <?php
}

    Then, in the Custom CSS section of the Customizr tab, I pasted this second code snippet:

    .custom-icon:before {
   content: url("URL OF THE IMAGE YOU WANT FOR THE ICON");
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url('URL OF THE IMAGE YOU WANT FOR THE ICON') no-repeat;
    background-size: 18px 18px;
}

    Now, a few more key notes:
    – I found the image I wanted to be an icon, edited in an awesome free photo editor (gotta make an account), called Pixlr Editor, changed the dimensions (Edit… Image Size… 25×25, or as small or large as you’d like) (*if for some reason, it doesn’t save as PNG, simply open that file in Paint or a similar program, then save as… PNG)
    – Saved as PNG image file
    – Uploaded to Add Media on WordPress, Edit… File URL (is what you paste in the ‘URL OF THE IMAGE YOU WANT FOR THE ICON’ fields above)

    Okay, hopefully this helps someone and make them feel super awesome too!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding one more Social Icon to Customizr Theme’ is closed to new replies.