I'm a Joomla beginner, and I'm creating a personal website using Bootstrap 3 and Joomla! 3.3. I saw something about Glyphicons not work with the custom B3. [I used the Customizer]

My template has the following structure:

 - css/ bootstrap.css | template.css | screen.css
 - fonts/ glyphicons-halflings-regular.eot | glyphicons-halflings-regular.svg
          glyphicons-halflings-regular.ttf | glyphicons-halflings-regular.woff  
 - images/ logo.png
 - js/ boostrap.js  
 - component.php
 - favicon.ico
 - index.html
 - index.php
 - template_thumbnail.png
 - template_preview.png
 - templateDetails.xml

In bootstrap.css file, @font-face looks like this:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

The default Bootstrap version loaded is 2.3.2 in Joomla!3.3, but I'm using the Bootstrap version 3 loaded this way:

?php defined('_JEXEC') or die;

$doc = JFactory::getDocument();
$doc->addStyleSheet('templates/' . $this->template . '/css/bootstrap.css');
$doc->addScript('/templates/' . $this->template . '/js/bootstrap.js', 'text/javascript');

What is wrong?

  • 1
    Are you importing the bootstrap css file correctly? How are you importing the Bootstrap css file? How are you trying to embed a glyphicon? Please show some code
    – Lodder
    Commented Aug 31, 2014 at 17:13
  • 1
    When you call an icon, does your page throw up an error (check the console). Sometimes it can be as simple as a path issue and you'll see a message about a file not being found.
    – Brian Peat
    Commented Aug 31, 2014 at 23:50
  • @Lodder, I trying use the bootstrap 3. I know that Joomla!3.3 don't work with <link rel=...> within the <head> tag. In this case, how is the correct way to load this files[css & js]? As above?
    – prleoassis
    Commented Sep 1, 2014 at 16:27
  • @BrianPeat, the most basic icons to be loaded, such as print and mail in component are not loaded.
    – prleoassis
    Commented Sep 1, 2014 at 16:32
  • 1
    Where is the code of implementing glyphicon ? please add that so we can figure out. Commented Feb 6, 2015 at 9:56

1 Answer 1


The question doesn't make clear if you load bootstrap 2 and bootstrap 3 at the same time, and also it's not clear how you try to use glyphicons in your code. The right (and working) way is for example:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.