Custom Social Media Button: Fontello

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?

Hello, try to use the following CSS code.

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

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

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

Kind Regards, Roman.

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*=""]::before {
	content: '\1f393'; text-decoration: none !important;
    color: #4a4a4a !important;}
.social-navigation .menu a[href*=""]::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’; } /* ‘’ */


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:

Kind Regards, Roman.

1 Like