Display PNGs instead of Genericon font for social links icons (without plugins)?

  • Currently, my site has a social links menu on the right-hand side*. Right now, the icons displayed for each link use the Genericon font instead of image files.

    I would like to be able to upload my own PNG icons, using image files for my icons instead of fonts. I want to do this WITHOUT the aid of plugins, instead of changing raw coding to do this.

    How do I go about doing that?

    * Portrayed HERE: https://drive.google.com/file/d/1kTBmfV9O3NkwD7TwRWj5z1pC_HoQOi5Q/view

    • This topic was modified 3 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    I think you mean left-hand side? ??

    This could all be done with custom CSS added to the Additional CSS customizer section. First you need to override the existing font icon content that’s defined in your theme’s style.css. Use your browser’s element inspector tool to help you find the relevant CSS and to develop proper replacement CSS.

    For each font icon used (specified using a :before pseudo-selector), set its related content: style to none. This is added to Additional CSS. Do not edit your theme’s style.css file!

    Using selectors similar to .social-navigation a[href*="twitter.com"], set a background-image property that points to the image file you want to use. Unless the file is perfectly sized for the menu item container, you’ll likely also want to add a background-size: cover; rule.

Viewing 1 replies (of 1 total)
  • The topic ‘Display PNGs instead of Genericon font for social links icons (without plugins)?’ is closed to new replies.

Tags