[labnoon]

Hi guys!

again I’m having a question about social icons and stuff and since I didn’t find the exact answer I was looking I started this topic.
I found that Read is provided with the truly awesome Font Awesome for icons. now due to my very little (read non-existent) coding knowledge, I am unable to write the right code in the text widget in the sidebar to link the icon to the web. could you please write that code for me? (I need a good source for beginners in order to get familiar with the coding language)

for example, I know the Font Awesome code for facebook is , I want it a tiny little bit bigger, with the color #bbb, I want the color to change to facebook blue #3b5998 when the curser hovers on it (the color of the icon itself, no borders, no background) and link to my facebook page which is https://www.facebook.com/labnoon.blog (the page is still unpublished, so it’s ok if doesn’t open for you)

could you gently write that code for me please? I have tried various ways that came to my mind but non worked. I hope I can learn something from this to be more independent with coding.

thank you a lot guys.

Saghar

[labnoon]

P.S. I have used href=”https://www.facebook.com/labnoon.blog” somewhere to try to link and it works, but the icon has the dotted underline and slightly darker background when curser hovers as almost any other other link in the site, and I don’t want it.

[labnoon]

Hi guys, I’m still looking for a hand from you. I’ve tried different stuff but no results.

Thank you

[ahmetsali]

Hi,

just use social icon shortcodes and use this custom css code;

.social li a.facebook {
    /* color: #bbb !important; */
    border: 0 !important;
}
.social li a {
    border: 0 !important;
    font-size: 44px;
    color: #BBB !important;
}
.social li a.facebook:hover {
    background: none;
    color: #3C5FAC !important;
}

[labnoon]

Thank you, thank you, thank you! :)

[labnoon]

It doesn’t work. :(
I have this

the color doesn’t change when curser hovers and I still have the dotted underline and beige background.

p.s. (anyways to make the link open in a new tab?)

[ahmetsali]

please provide your url to see what’s wrong.

[labnoon]

ok. this is a the code I used from Font Awesome in my text widgets

[url=http://postimg.org/image/acxc12woz/][img]http://s21.postimg.org/acxc12woz/Schermata_2014_02_25_a_22_28_33.jpg[/img][/url]

(pardon the snapshot, but couldn’t find a way of writing the code here and make it appear as text)

my site is http://www.labnoon.com which is still in a phase of construction.

Thank you for the patience :)

[labnoon]

this is the snapshot of the code in text widget http://postimg.org/image/acxc12woz/

[Mehmet S.]

Hi, try this:

[social_icons]
[social_icon type="facebook" url="http://www.facebook.com/username"]
[/social_icons]

OR

<a href="http://www.facebook.com/username"><i class="icon-facebook icon-2x"></i></a>

Note: This theme has Font Awesome 3 series icons.

icons: http://fontawesome.io/3.2.1/icons

examples: http://fontawesome.io/3.2.1/examples

[labnoon]

Hi @Mehmet and thank you

the first code you provided works well and the colors work just as I wanted thanks to the custom css that Ahmet provided before. but I think they’re from JustVector icons and I don’t like their design and I prefer the design of Font Awesome.

As for the second code, which apparently is Font Awesome, it doesn’t work. I assume it’s because I had updated Font Awesome in the theme to its last version (4.0), following the steps you had suggested for a similar upgrade in another forum topic. do you suggest I start using the 3.2.1 version?

I used the example for the 4.0 versions, http://fortawesome.github.io/Font-Awesome/examples/ and the icon appears, and the links works fine and everything. the only thing is that I couldn’t change color, the hover color and the dotted underline. and Ahmet’s css didn’t work on that (it works on JustVector, your first code)

Thank you again for the pacience

[labnoon]

Hi again! I’ve tried to play with the custom CSS and I finally modified like this

.fa-facebook {
/* color: #bbb !important; */
border: 0 !important;
padding-right: 20px;
}
.fa-facebook {
border: 0 !important;
color: #BBB !important;
}
.fa-facebook:hover {
background: none;
color: #3B5998 !important;
}

and it works on font awesome html that I put in my text widget in the side bar which is

and everything works fine except the fact that I still get the dotted underline and beige background when mouse hovers on the icons. I’ve tried adding the text-decoration:none !important; to my custom css, but no matter where I put it I still got the underline.
you can see it here http://www.labnoon.com

I hope you can give me hand with this.

Thank you endlessly, really.

Saghar

p.s. do you think the padding I added to the right of each icon is the most reasonable way to separate them or there’s a better way to do that?

[labnoon]

this is the code, (without the spaces naturally) I hope it shows up this time

<a href="#"><i></i></a>

(how can I write code here without making it execute?)

[labnoon]

ok I give up. it’s code from here http://fortawesome.github.io/Font-Awesome/icon/facebook/, with right size and the href

[ahmetsali]

you can try this custom css code to remove hover effect on sidebar links;

.widget-area a:hover {
    border: 0;
    background: none;
}

[labnoon]

Thanks for the quick reply! That does work, but as it’s clear it takes off the underline from all of the widgets. while for the text widgets with social icons it’s exactly what I wanted, it doesn’t look very well on my blogroll, my archive and other widgets with links :(
sorry this topic has been going on for so long now. do you think there’s a way I can apply it only to that widget? or only to text widgets?

I really appreciate your help guys
Thanks a lot

[ahmetsali]

then wrap your links with a div

<div class="my-social">
 
</div>

then use this custom css;

.widget-area .my-social a:hover {
    border: 0;
    background: none;
}

[labnoon]

Thank you really really much! you have been an amazing help! Finally it’s how I wanted it to be :)

[Mehmet S.]

Ok. Good luck.