Add Social Icons to Header

  • Unknown's avatar
    briantraudt · Member ·

    Anyone know how to do this? Instead of saying “Facebook” I want to use the social icons.

    The blog I need help with is: (visible only to logged in users)

  • staff-doublebassd · Staff ·

    Hi there,

    I see that you have several sites under your account. Which site are you wanting to add social icons to? Depending on the setup, you can add social icons via HTML:

    https://en.support.wordpress.com/widgets/social-media-icons-widget/#add-custom-social-icons

    Let me know the site and I’d be happy to look further into this for you.

    Thanks,

  • Unknown's avatar
    briantraudt · Member ·

    It’s briantraudt.com I want to change the words in the header to icons. They footer uses icons but i just want them in the header and for some reason it changes to the actual words like “facebook”, etc.

  • kokkieh · Staff ·

    Hi Brian,

    The footer uses icons, because that’s where your theme displays the Jetpack plugin’s social links menu. That specific menu is designed to contain links to to your social profile, and to then display those links as icons.

    Jetpack

    The menu at the top is your theme’s primary menu, and that menu is not designed to work in this way. The primary menu is designed primarily for links to pages on your site, and displays anchor text – by default the titles of pages you add to it.

    To have the primary menu display icons, you’d need to use CSS code to hide the menu anchor text, and replace it with icon images. We’re not able to help you with the code for that kind of customization.

    It would be simpler to switch to a theme that displays the social menu at the top. You can see a full list of all WordPress.com/Jetpack themes that support social menus at https://wordpress.com/themes/filter/social-menu/.

    In particular I’d recommend you look at Exford and Maywood – those are two of our newest themes, and also designed specifically for the block editor. Independent Publisher 2 might also work for you to stay with the single-column minimalist look your front page has at the moment.

  • Unknown's avatar
    briantraudt · Member ·

    Ugh – I really don’t want to change the theme. so there is no CSS code I can add to get the social icons in the header??

  • Unknown's avatar
    briantraudt · Member ·

    Also, can you tell me how I can change all font colors, including the hover links to be black?

  • supernovia · Staff ·

    so there is no CSS code I can add to get the social icons in the header??

    None that would be a simple solution, unfortunately. Your site isn’t hosted here, so you could make a child theme if you wanted to. It’s a little techy, but here’s a how-to:

    Child Themes

    can you tell me how I can change all font colors, including the hover links to be black?

    That one’s a bit easier to change. Adding this to your CSS should get most of them.

    body, button, input, select, textarea, a:hover, .main-navigation ul li a:hover {
    color: #000000;
}

    If that misses anything, here’s how to find and change what you need to change:

    https://wordpress.com/support/custom-design/how-to-find-your-themes-css/

    Going forward, you’ll also want to use the correct forums for self-managed installations, at https://wordpress.org/support/forums/

    Or, you’d be welcome to migrate your site to our services. You can find our pricing here:
    https://wordpress.com/pricing

    Cheers!

  • The topic ‘Add Social Icons to Header’ is closed to new replies.