Joomla Templates Club 406,261 posts

[mazhar shah Friend mazhar shahJoin date: September 2014Posts: 201Downloads:132Uploads:37 Thanks: 37 Thanked: 8 times in 5 posts]

#840696

what is the code to use the "Bootstrap3" icons and the Font Awesome icons on page layouts.

For bootstrap3 I tried this for the search icon on a joomla page, but for some reason it didn’t work

<span class="glyphicon glyphicon-search" aria-hidden="true">

EDIT…. because i am not using ‘text’, the code is stripped when i save it. in other words, this works using hello as text:

<span class="glyphicon glyphicon-search" aria-hidden="true">hello

Is there any way to add ONLY the icons as href links – without using text?

I have also found that i can use larger icons via: <span style="font-size:2.5em;" class="glyphicon glyphicon-th-list">

BUT how do you display a LARGE icon and keep the text line of smaller font size?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#841580

Hi we used font-awesome icon in the templates . You can find the icon from here and use the code . You can see on font awesome site the icon code has different size , u can use the same code or apply your custom style on icons using custom.css file

[mazhar shah Friend mazhar shahJoin date: September 2014Posts: 201Downloads:132Uploads:37 Thanks: 37 Thanked: 8 times in 5 posts]

#847531

.

[mazhar shah Friend mazhar shahJoin date: September 2014Posts: 201Downloads:132Uploads:37 Thanks: 37 Thanked: 8 times in 5 posts]

#847535

hi cannot use the icons properly.

1. If i use this:

   <span class="glyphicon glyphicon-ok"> Summer</span>

the ‘tick’ icon appears in front of summer BUT THE FONT CSS for the text ‘summer’ IS TOTALLY DIFFERENT. The font loses the body css and becomes a times font. It should be Questrial font.

If i use this:

`<span class="glyphicon glyphicon-ok"> </span>Summer

NO ICON APPEARS AT ALL. AN EMPTY SPACE IS NOT ALLOWED BETWEEN THE SPANS

If I use this

<span class="glyphicon glyphicon-ok">x</span>Summer

The icon appears again BUT obviously, the text ‘x’ is not required. Putting a ‘space’ there does NOT work. Putting a non-breaking space

Putting a ‘space’ there does NOT work. Putting a non-breaking space

 

works on first save but is then stripped out by TINYMICE editor.

So…. how can we use the icons please??

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#847631

Hi
The editor remove the code . So first go to global configuration and set default editor to NONE .
The add your code .
we used font-awesome icon code > https://fortawesome.github.io/Font-Awesome/icons/
Example : <i class="fa fa-search">
If still there is any confusion kindly post your site admin details via private reply and let know where i can check your problems on your site .

[Author]

Posts