Joomla Templates Club 406,261 posts

[brusamolino Friend brusamolinoJoin date: January 2009Posts: 273Downloads:75Uploads:70 Thanks: 56 Thanked: 10 times in 2 posts]

#188482

Hi
I’ve tried to add social network icon inside “+” button in “Follow us”
I’ve modified template css and bootstrap.css

In bootstrap.css i’ve added

.icon-youtube:before {
content: “f16a”;
}
.icon-flickr:before {
content: “f16e”;
}

but appear the code and not the icon why?

---

Attachments:

1. 

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#496992

Hi brusamolino,

If you simply add

.icon-youtube:before {
content: “f16a”;
}
.icon-flickr:before {
content: “f16e”;
}

it will not work. You need to replace the font file also.

JA Smashboard comes with Font Awesome 3.1 by default.
If you want to use new icon, you need to upgrade Font Awesome.

Just download the latest version of Font Awesome http://fortawesome.github.io/Font-Awesome/ replace with the current version in template folder. Compile LESS to CSS again and it will work.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. brusamolino

[netman45 Friend netman45Join date: July 2013Posts: 18Downloads:0Uploads:3 Thanks: 4]

#504578

I downloaded the latest version of Font Awesome (Version 3.2.1) and I replaced the files in the template folder, I have compiled LESS to CSS
but the new icons appear all black .. what I did wrong?:((

---

Attachments:

1. 

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#504619

Hi netman45,

Yes, it should be black by default.
If you want to change the color you should add some style rule.

You can add it to custom.css (create this file if it does not exist on css folder) like this:

ul.btn-social li.dropdown .social-list li a .icon-youtube {
background-color: #cc181e/* change color here */
}

ul.btn-social li.dropdown .social-list li a .icon-flickr {
background-color: #0063dc/* change color here */
}

You can also modified /less/modules.less at line 340
Just copy the previous icon and paste it bellow, like this.

.icon-youtube {
background-color: #cc181e
}

.icon-flickr {
background-color: #0063dc
}

Then you need to compile LESS to CSS.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. s4reea

[netman45 Friend netman45Join date: July 2013Posts: 18Downloads:0Uploads:3 Thanks: 4]

#504691

Hi Wall Crasher,
thank you for your prompt response, I had already started to do some testing and have done so: I added the line

ul.btn-social li.dropdown .social-list li a .icon-youtube {
background-color: #cc181e/* change color here */
}

ul.btn-social li.dropdown .social-list li a .icon-flickr {
background-color: #0063dc/* change color here */
}

in template.css at line 1784

everything seems to work ….
not good as I did?
thanks again:((

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#504778

Hi netman45,

It is ok as long as you do not recompile LESS to CSS.
If you compile LESS to CSS, template.css will be overwritten.

🙂

Regards

1 user says Thank You to Wall Crasher for this useful post

1. s4reea

[s4reea Friend s4reeaJoin date: August 2013Posts: 42Downloads:0Uploads:6 Thanks: 26 Thanked: 2 times in 1 posts]

#505014

<em>@netman45 388068 wrote:</em><blockquote>Hi Wall Crasher,
thank you for your prompt response, I had already started to do some testing and have done so: I added the line

ul.btn-social li.dropdown .social-list li a .icon-youtube {
background-color: #cc181e/* change color here */
}

ul.btn-social li.dropdown .social-list li a .icon-flickr {
background-color: #0063dc/* change color here */
}

in template.css at line 1784

everything seems to work ….
not good as I did?
thanks again:((</blockquote>

I have read about it, why you shouldn’t edit the css files directly…
T3-framework works with LESS files, they are located at t3-assets folder, each time you compile you build up all the necessary css files from less files. so the origin comes from less, as long as you don’t edit the LESS they will keep over writing what you changed in css. there is one exception though, it is the custom.css file which is not compiled from less so you should add style rules there.
here is more info: http://t3-framework.org/documentation/customization.html#Customize Theme

and you can see in the same link http://t3-framework.org/documentation/customization.html#custom-css

good luck

2 users say Thank You to s4reea for this useful post

1. phong nam
2. netman45

[netman45 Friend netman45Join date: July 2013Posts: 18Downloads:0Uploads:3 Thanks: 4]

#505040

Great, in fact it is so much easier and changes all reside in a single file and are easier to find!
Thank you!:)

[Author]

Posts