Custom Icon

  • I’m an idiot when it comes to CSS… but I’ve spent the better part of a few days trying to get this right and using my novice skills to make this happen, but to no avail.

    I have a realtor.com profile:
    https://www.realtor.com/realestateagents/Joe-Gattone_Lake-Forest_IL_2050288_681334226

    I want this photo as the icon for the link to my profile on the social menu:
    https://a4.mzstatic.com/eu/r30/Purple30/v4/67/9b/09/679b0909-7b6f-827b-2bbd-2debc9d36c92/icon175x175.png

    The current icon I see is a standard bullet… this is the style code I see when I identify the bullet link:

    @media screen and (min-width: 32.375em)
    #hero-header .social-navigation ul.menu li a:before {
    font-size: 1.875rem;
    }

    #hero-header .social-navigation ul.menu li a:before {
    font-size: 1.688rem;
    }
    .social-navigation li a:before {
    content: “\f428”;
    display: inline-block;
    font-family: ‘Genericons’;
    font-size: 1.625rem;
    padding: 0 5px;
    vertical-align: middle;
    }

    The HTML code has several other items that highlight just the bullet icon, and lists my profile link, but when I hover over the style lines they all highlight more than just the bullet icon.

    And then the kicker… once I get the CSS code, do I put it in the Customized CSS section?

    Thanks,
    Joe

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter brokerapproved

    (@brokerapproved)

    Update: Again, forgive me if I sound stupid.

    I noticed that for all the social media websites, it seems they are referencing a logo though the coding:

    Context: ‘/f222’ or another number i.e. /f218, /f410, etc. Each one is different, and it seems this is what I need to change in order to insert a logo into the existing format.

    Where do I find the list of all the f###’s so that I can add one and link it to a logo url?

    Thanks,
    Joe

    Theme Author Raam Dev

    (@raamdev)

    @brokerapproved You’re not alone. ?? It took me a little while to understand how content references work the first time around.

    Here’s the section of style.css that defines the URLs and their associated icons: https://github.com/raamdev/independent-publisher/blob/1.7/style.css#L2412-L2572

    When you add a new menu item to the Social menu, the icon is determined by the domain in the URL (e.g., if your URL contains www.ads-software.com, the WordPress icon is used).

    If you want to add your own domain+icon combination, you can copy the CSS for one of the existing definitions and put that anywhere in Appearance → Custom CSS (enabled via JetPack) or in the style.css file for a Child Theme.

    Where do you find the icon content: strings? See https://genericons.com/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom Icon’ is closed to new replies.