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:
http://www.realtor.com/realestateagents/Joe-Gattone_Lake-Forest_IL_2050288_681334226I want this photo as the icon for the link to my profile on the social menu:
http://a4.mzstatic.com/eu/r30/Purple30/v4/67/9b/09/679b0909-7b6f-827b-2bbd-2debc9d36c92/icon175x175.pngThe 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
-
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@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.cssthat defines the URLs and their associated icons: https://github.com/raamdev/independent-publisher/blob/1.7/style.css#L2412-L2572When 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
ww.wp.xz.cn, 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.cssfile for a Child Theme.Where do you find the icon
content:strings? See https://genericons.com/
The topic ‘Custom Icon’ is closed to new replies.
