Support Forum

  • Page:
  • 1

Jb Type Font Icons

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi,

I am trying to increase the JB font icon size, but I miss something. I put the code in custom.css file but nothing changes at all.

Below is the code I pasted from Jb Type page:

".jbtype i:before {
font-size: 4em;
color: #333;
}"

This code increase all the JB icons, fonts, etc...?

Thanks,

Sergio
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sergio,

Can I just check how are using the plugin? - on what template and do you have a link for the site

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

this is the straight link to that question is related:

corredordasoncas.org.br/index.php/component/content/article?id=79

The content still in tests and we will fill in the content.

Thanks

Sergio
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sergio,

With JB Type there are font based icons and image based

Only the font based icons can be enlarged

The envelope is an image so can't be bigger unless you edit the actual image by changing the sprite

.jb_iconic_mail {
background: url(/media/jbtype/images/iconic/allicons.png) no-repeat 0 -1914px;
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Perhaps try

jb_icon-envelope

which is a font icon

www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Paul, these last answers are a mix of both topics I opened at same time? they aren't related.
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
Last Edit: 6 years 3 months ago by Sergio Ferreira.
The administrator has disabled public write access.
No unless I'm a looking at the wrong icon

I'm referring to the envelope image on this page

corredordasoncas.org.br/index.php/component/content/article?id=79
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
As a beginner probably I'm doing something wrong. Nothing is changing here.

Where is the exactly file (place) should I put the code you mention before? (".jb_iconic_mail {
background: url(/media/jbtype/images/iconic/allicons.png) no-repeat 0 -1914px;")

In the JB Type manual ( www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin) there is this code:
".jbtype i:before {
font-size: 4em;
color: #333;" also I tried without any good result.
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sergio,

The envelope you have is an image so isn't affected by any font change

For a font size css adjustment to work it needs to be a font icon and not an image

{ jb_icon-envelope}{/ jb_icon-envelope} is the syntax for the envelope font icon
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Please note the spaces inside the brackets need to be removed when you add the snippet -

I added the spaces so you could see the code rather than icon

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Now I understood, thanks for It. With FontAwesome I was able to do that?

Thanks Paul!
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
I think from memory this is the font awesome icon but using different syntax in the plugin

With newer templates its a lot more flexible

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Paul,

So, there is no way to enlarge these Icons like It is in a html contact module in bottom side of Ecospirit live preview?

Thanks for help!!!

Sergio
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sergio,

Yep certainly is once its a font icon it is controllable like any normal web text
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Can you turn the site back online and I can have a look?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Ops, my mistake!!!!
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sergio,

I'm still seeing the icon image rather than the icon font on the page

but I can see a font awesome map marker
so for an example add this

.icon-map-marker {font-size:4em}

This should make the map marker increase in size

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul!

I put the font icons now and I put the snippet code in template.css, but the size doesn't increase. Probably I missed something.

Cheers,
Sergio
  • Sergio Ferreira's Avatar
  • Sergio Ferreira
  • 12 Month basic
  • 46 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sergio,

I'd look to target them individually

.icon-envelope:before {font-size:4em;} for example

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers