Instead of above mentioned code you might want to use something like this:
#menu-item-13 {
margin-left: 300px;
}
It is easy to add these icons since they are already integrated in the theme and you only need to add an extra one. If you are looking for other icon to be added there then you will have a hard time to get it done. Maybe some plugin could help with shortcodes or something but otherwise it might get really complicated.
Yes, I can choose the icon from the site you gave me. However, I can’t find how to add another icon and put next to the other social icons already there. Would you tell me how?
I’d like to change hoover color. instead of showing square color around it, I want to change the icon color it self. Instead of showing square color of red or blue (whatever the colors), I simply want to show grey icons (no square around it).
Hope you understand what I’m trying to say…
Btw, which icon is it? Maybe it is worth adding it to theme via next theme update.
It is a bit tricky ti implement if you have no idea about coding at at all.
The first thing is to register a new text field in Theme Options by editing
$social_links = array in theme-options.php file. You will see how other icons are created there.
Next step is to set default value for Theme Options in themeoptions-defaults.php again you will see how it is done for other icons.
Now you will have to call for newly created icon in header-extensions.php. More specifically look into travelify_headerdetails function.
Now add proper styling to this icon and use its ID for content. ID can be found in Genericons website under CSS option.
It will look something like this
.social-icons ul li.facebook a:before {
content: '\f204';
}
.social-icons ul li.facebook a:hover {
background: #3B5998;
}
To change icon color on hover you can replace background: with color: on hover but you will also have to get rid of
.social-icons ul li a:hover {
color: #fff !important;
}
Since it overrides all hover colors and makes it white instead.
Thank you so much for your reply. I really appreciate all the details!
However, because I’m so new… I have to look into how to register a new text field in Theme Option.
I found all the social icon code in Travelify style.css (not a in Child), but I think I should not change it directly there.
So first, I’m trying to change hoover color, but also not sure how (where) to get rid of below…
.social-icons ul li a:hover {
color: #fff !important;
}
I found them in Travelify style.css, but again I think I should not change directly in Travelify style.css
I apologize all the beginner questions…
Yes, I think it’d be great if you add new social icon for Bloglovin (with #heart icon).
No, Bloglovin is definitely not going to become part of this theme. Maybe heart icon could become a part as a random icon, so it could be used for anything.
Adding a single icon via Child Theme might be incredibly difficult as you have to recreate all those functions. It is definitely not worth it.
One alternative would be to replace already existing icon using CSS. It would be still titled as Facebook, Twitter or anything else but the icon would be displayed as Blogvin.
For instance here is code that will replace RSS with heart icon.
.social-icons ul li.rss a:before {
content: '\f461';
}
To change icon color on hover you can use this code via Child Theme style.css