SASS variables for GitHub pages site powered by Jekyll not updating to reflect color changes
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Problem:

I am migrating my personal blog over to Jekyll, and am using the Jekyll theme Minimal Mistakes as a starting point. Here is the repo my site's code is hosted on. The site running live is here.

Everything's almost set but, as you can see, I've added in a couple of custom Font Awesome icons in the sidebar area for additional social profiles (I've added Quora and Codepen alongside the other sidebar icons by defining them in /_includes/author-profile.html and added Meetup in /_includes/author-profile-custom.html.

I can see that the color of the Font Awesome icons is being defined in /SASS/_variables.scss, and I've added in corresponding colors for the additional icons using the exact same schema. But for some reason, no matter what I do, they remain black. I've tried hacks like !important and such, but nothing I've been able to do can get the colors to update for the custom sidebar FA icons.

This is probably something simple I"m missing. Any ideas?

Thanks for the suggestions, but I figured the problem out myself...

In the _sass/_utilities.scss directory, I needed to define a hex color for the quora and meetup variables. Duh!
paragon21 4 months ago
4 months ago
Tags
scss

Crowdsource coding tasks.

3 Solutions


In CSS style sheet add the below code to get red meetup icon

i.fa.fa-fw.fa-meetup{
color:red;
}

Similarly you can fill/change any fa icon color by:

fa-<icon_name_here>{ color: name_of_the_color; }

Yes, I know that much, but that doesn't fix anything, nor does it answer why, despite the variables being changed in the _variables.scss file to alter the color of the FA icons, they are not changing in the site itself. https://github.com/carlvlewis/carlvlewis.github.io/blob/master/_sass/_variables.scss
paragon21 4 months ago

Hi There,

i will propose all solutions for that:

1/ using Social Buttons for Bootstrap:

link: https://lipis.github.io/bootstrap-social/

this plugin, is powerful, and gives you nice buttons code, simply to integrate in your website.

2/ using Font Awesome Colored - Brand And Social Icons:

link: https://codepen.io/ameyraut/pen/yfzog

this plugin, is written in CSS code also, defining the real colors of each icon, with nice effects, if you want them supported. if you want a transparent background, just refactor the code and change background-color by color (only for icon colors), and you will have the same like in your website, with nice transition effects.

3/ using Social Media Colors – Hex and RGB Colors of the Web:

link 1: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/

link 2: https://www.competethemes.com/blog/social-media-colors/

these links, have the real hex and RGB colors for the SASS icons, you can get use of them

Recommended Solution:

Personally, i suggest using the second solution, since it have many chapes and nice CSS transition effects. and don't forget to change background-color by color if needed

all you want is here, get nice use of it.

hope you liked my solution.

the idea, was about to define these classes, because they didn't exist, i mentioned that, and also, gave the original hex colors, for popular websites, and how to set it using solution 2. if this is not to spec, what can i have to say! huh!
Houcem B. A. Chlegou 4 months ago

you should try some adding extra properties or over writting in your scss or css. like this one (.fa.fa-fw.fa-envelope-square{ color: red })
adding the color what ever you want .. i try and it work for me i hope it will useful for you. And by the way why you don't make an extra css link file which over write the properties of scss or font awesome properties.

View Timeline