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

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

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

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;

Perhaps try

jb_icon-envelope

which is a font icon

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

Cheers
Paul

Paul, these last answers are a mix of both topics I opened at same time? they aren't related.

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

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.

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

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

Now I understood, thanks for It. With FontAwesome I was able to do that?

Thanks Paul!

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

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

Hi Sergio,

Yep certainly is once its a font icon it is controllable like any normal web text

Can you turn the site back online and I can have a look?

Ops, my mistake!!!!

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

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

Hi Sergio,

I'd look to target them individually

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

Cheers
Paul