Custom Social Media Button: Fontello


#1

Hello again,
So you may not be able to answer this one… but I did a custom icon (Fontello Font Awesome graduation cap) in the social media footer and I can’t get it to fully render… what am I missing?
https://makerthinker.org


#2

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.social-navigation .menu a[href*="uwo.ca"]::before {
    content: '\1f393';
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#3

Thanks, this worked, but I can’t get it to display white on hover like my other icons, and flattened out to grey before…

Have this in the additional CSS:

.social-navigation .menu a[href*="uwo.ca"]::before {
	content: '\1f393'; text-decoration: none !important;
    color: #4a4a4a !important;}
.social-navigation .menu a[href*="uwo.ca"]::hover {
	background-color: #faae33;
	color: #ffffff !important;}

I realize its a unicode character, and I had previously tried to load the Fontello font awesome grad cap, so I still have that code in the fontello css files… this was it:
.icon-graduation-cap:before { content: ‘\f19d’; } /* ‘’ */


#4

Hello,

I don’t think that there is an easy way to change that icon hover color, unfortunately. The icon itself has three different colors.

As a workaround, you can try to make the rest of icons look similarly on hover by adding this CSS code:

.social-navigation .menu a:hover {
	color: #394146;
}

As another workaround, you can try to use relevant Font Awesome icon instead:
https://fontawesome.com/v4.7.0/icon/graduation-cap

Kind Regards, Roman.