Joomla Templates Club 406,261 posts

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#719200

I set up an addthis account ‘b24’ and chose some social icons, pasted the codes into the template etc. Some icons don’t appear. Also how can I choose to show coloured icons like those used in Teline V ?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#719327

Hi Tim,

In this template, we use font awesome icons for social icons in share this tool. Unfortunately, these are not pre-defined icons for some socials network that you’re using like viber, …

You can see the declaration via this file: /root/templates/ja_magz_ii/less/style.less


&.aticon-facebook:before {
content: "f09a";
}

&.aticon-twitter:before {
content: "f099";
}

&.aticon-google_plusone_share:before {
content: "f0d5";
}

&.aticon-linkedin:before {
content: "f0e1";
}

&.aticon-pinterest_share:before {
content: "f0d2";
}

&.aticon-digg:before {
content: "f1a6";
}

&.aticon-print:before {
content: "f02f";
}

&.aticon-email:before {
content: "f0e0";
}


If you want to use an alternative icon for viber, you can add like this:


&.aticon-viber:before {
content: "f095";
}


this is icon for phone

Check out this reference for list of content values of FA icons: http://astronautweb.co/snippet/font-awesome/

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#753014

Hi Tim,

In this template, we use font awesome icons for social icons in share this tool. Unfortunately, these are not pre-defined icons for some socials network that you’re using like viber, …

You can see the declaration via this file: /root/templates/ja_magz_ii/less/style.less


&.aticon-facebook:before {
content: "f09a";
}

&.aticon-twitter:before {
content: "f099";
}

&.aticon-google_plusone_share:before {
content: "f0d5";
}

&.aticon-linkedin:before {
content: "f0e1";
}

&.aticon-pinterest_share:before {
content: "f0d2";
}

&.aticon-digg:before {
content: "f1a6";
}

&.aticon-print:before {
content: "f02f";
}

&.aticon-email:before {
content: "f0e0";
}


If you want to use an alternative icon for viber, you can add like this:


&.aticon-viber:before {
content: "f095";
}


this is icon for phone

Check out this reference for list of content values of FA icons: http://astronautweb.co/snippet/font-awesome/

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#719747

@saguaros Thanks, but I can’t find a ‘WhatsApp’ icon and ‘Viber’ still blank. More surprising is that the AddThis + doesn’t show either.

Is there a way to override the font awesome icons and use the usual social buttons like Teline V instead ?

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#753061

@saguaros Thanks, but I can’t find a ‘WhatsApp’ icon and ‘Viber’ still blank. More surprising is that the AddThis + doesn’t show either.

Is there a way to override the font awesome icons and use the usual social buttons like Teline V instead ?

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#720225

@Saguaros I have discovered that one must select the largest addthis icons or the css for the buttons is stuffed up (TIP) but still no font awesome icon for ‘+’ nor ‘WhatsApp’

Viber button opens Email window? I have Viber app installed.

I tried adding to the /root/templates/ja_magz_ii/less/style.less as follows

}
&.aticon-email_app:before {
content: “f0e0”;
}
&.aticon-viber:before {
content: “f095”;
}
&.aticon-plus-square:before {
content: “f0fe”;
}

&.at-svc-email_app {
background-color: @bran d-secondary;
}
&.at-svc-viber:before {
background-color: @bran d-secondary;
}
&.at-svc-plus-square:before {
background-color: @bran d-secondary;
}

But I don’t see the requested ‘+’ nor ‘Email’ buttons although service is present.

What am I missing? Also how to ensure popups or new tab instead of same tab ?

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#753237

@Saguaros I have discovered that one must select the largest addthis icons or the css for the buttons is stuffed up (TIP) but still no font awesome icon for ‘+’ nor ‘WhatsApp’

Viber button opens Email window? I have Viber app installed.

I tried adding to the /root/templates/ja_magz_ii/less/style.less as follows

}
&.aticon-email_app:before {
content: “f0e0”;
}
&.aticon-viber:before {
content: “f095”;
}
&.aticon-plus-square:before {
content: “f0fe”;
}

&.at-svc-email_app {
background-color: @bran d-secondary;
}
&.at-svc-viber:before {
background-color: @bran d-secondary;
}
&.at-svc-plus-square:before {
background-color: @bran d-secondary;
}

But I don’t see the requested ‘+’ nor ‘Email’ buttons although service is present.

What am I missing? Also how to ensure popups or new tab instead of same tab ?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#720365

You can find available content values for FA icons here: http://astronautweb.co/snippet/font-awesome/ (for ‘+’ / ‘Emaill’)

And your site is running with css (Development Mode is set OFF) so when you change in less file as above, you will need to compile less to css ( REMEMBER to backup all of current css files first as when compiling, they will be overridden).

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#753323

You can find available content values for FA icons here: http://astronautweb.co/snippet/font-awesome/ (for ‘+’ / ‘Emaill’)

And your site is running with css (Development Mode is set OFF) so when you change in less file as above, you will need to compile less to css ( REMEMBER to backup all of current css files first as when compiling, they will be overridden).

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#720522

I have added these below but no font awesome images show except Viber (phone) which opens an email popup. I have no css edits except in custom.css so less to css compile is fine.

&.aticon-email_app:before { content: “f0e0”; } &.aticon-viber:before { content: “f095”; } &.aticon-plus-square:before { content: “f0fe”; }

I’ve never had such problems with AddThis normal social buttons. Also see image below on Reading Mode page. What do you think has caused this?

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#753360

I have added these below but no font awesome images show except Viber (phone) which opens an email popup. I have no css edits except in custom.css so less to css compile is fine.

&.aticon-email_app:before { content: “f0e0”; } &.aticon-viber:before { content: “f095”; } &.aticon-plus-square:before { content: “f0fe”; }

I’ve never had such problems with AddThis normal social buttons. Also see image below on Reading Mode page. What do you think has caused this?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#720897

Where did you add content value for email / viber icons? as I don’t see it on your site now. If you add via less file as I mentioned above, try to turn ON the Developement Mode and see how it goes.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#753437

Where did you add content value for email / viber icons? as I don’t see it on your site now. If you add via less file as I mentioned above, try to turn ON the Developement Mode and see how it goes.

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#721096

Dev mode is ON.

Editing file “/less/style.less” in template “ja_magz_ii”.
Line 927

&.aticon-email_app:before {
content: “f0e0”;
}
&.aticon-viber:before {
content: “f095”;
}
&.aticon-plus-square:before {
content: “f0fe”;
}

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#753498

Dev mode is ON.

Editing file “/less/style.less” in template “ja_magz_ii”.
Line 927

&.aticon-email_app:before {
content: “f0e0”;
}
&.aticon-viber:before {
content: “f095”;
}
&.aticon-plus-square:before {
content: “f0fe”;
}

[Author]

Posts