Bootstrap 3 and Glyphicons Halflings font

Bootstrap 3 and Glyphicons Halflings font

由Mary Evans發表於
Number of replies: 18

I'm currently building a Moodle theme with parent Base theme using Bootstrap 3. I am testing this on Moodle 2.7 Alpha as this moment in time. All is well now but I did run into a problem that I was not aware of until I started to wonder why it was the Glyphicons Halflings font did not work with the Tiny Bootstrap Project renderers I was using.

The reason is that if you are going to use 'Glyphicons Halflings' Fonts and not Images for your icons, then all your efforts of adding <i></i> tags that become the place holders for the 'icons' in Bootstrap 2 is no longer used. Instead you have to convert the <i> </i> tags to <span> </span> tags in all the places you want to use font icons and not images, this means changing all the icon names too.

For example:

<i class="icon icon-cog" ></i> becomes <span class="glyphicon glyphicon-cog"></span>

While the @font-face CSS is as follows if you are not using any fancy settings like there are in Elegance theme:

@charset 'UTF-8';

@font-face {
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    src: url([[font:theme|glyphicons-halflings-regular.eot]]);
    src: url([[font:theme|glyphicons-halflings-regular.eot]]) format('embedded-opentype'),
         url([[font:theme|glyphicons-halflings-regular.woff]]) format('woff'),
         url([[font:theme|glyphicons-halflings-regular.ttf]]) format('truetype'),
         url([[font:theme|glyphicons-halflings-regular.svg]]) format('svg');
}

Cheers

Mary

評比平均分數： -
In reply to Mary Evans

Re: Bootstrap 3 and Glyphicons Halflings font

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

I use the 'i' tag for FontAwesome in a few places.  What's the problem Mary please?

評比平均分數： -
In reply to Gareth J Barnard

Re: Bootstrap 3 and Glyphicons Halflings font

由Mary Evans發表於

There isn't a problem as such, I was just pointing out that should you want to use Glyphicon fonts then you would need to code for them using 'span' and not 'i' tags also naming them using 'glyphicon' and not 'icon' as explained.

If you are using  Font Awesome then that's not a problem.

Cheers

Mary

評比平均分數：Useful (1)
In reply to Gareth J Barnard

Re: Bootstrap 3 and Glyphicons Halflings font

由Mary Evans發表於

I have just amended the text so that what I was trying to say sounds better...I hope!

微笑

Mary

評比平均分數：Useful (1)
In reply to Mary Evans

Re: Bootstrap 3 and Glyphicons Halflings font

由Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

Glyphicons Halflings?

We have Hobbits in Moodle now? :D

A new theme idea springs instantly to mind!

評比平均分數： -
In reply to Richard Oelmann

Re: Bootstrap 3 and Glyphicons Halflings font

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

One theme to rule them all?  I thought that was 'Essential' 微笑

評比平均分數：Useful (1)
In reply to Gareth J Barnard

Re: Bootstrap 3 and Glyphicons Halflings font

由Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

No, that would have to be bootstrapbase

Essential would be one of the pure, Elven rings that protect what is good and beautiful in the Moodle world :D

(does that make Julian out as Elrond?)

To tie in with your Sherlock one on Stuart's post

http://www.allthetests.com/quiz30/quiz/1388836697/Which-Lord-of-the-Rings-Character-are-you

LOL - Its too late, bed time!

評比平均分數： -
In reply to Richard Oelmann

Re: Bootstrap 3 and Glyphicons Halflings font

由Mary Evans發表於

Well I am Galadriel

Galadriel's Song

I sang of leaves, of leaves of gold, and leaves of gold there grew:
Of wind I sang, a wind there came and in the branches blew.
Beyond the Sun, beyond the Moon, the foam was on the Sea,
And by the strand of Ilmarin there grew a golden Tree.
Beneath the stars of Ever-eve in Eldamar it shone,
In Eldamar beside the walls of Elven Tirion.
There long the golden leaves have grown upon the branching years,
While here beyond the Sundering Seas now fall the Elven-tears.
O Lórien! The Winter comes, the bare and leafless Day;
The leaves are falling in the stream, the River flows away.
O Lórien! Too long I have dwelt upon this Hither Shore
And in a fading crown have twined the golden elanor.
But if of ships I now should sing, what ship would come to me,
What ship would bear me ever back across so wide a Sea?
by J R R Tolkien
評比平均分數：Useful (1)
In reply to Mary Evans

Re: Bootstrap 3 and Glyphicons Halflings font

由David Scotson發表於
To be pedantic, I think the i tag still works, since Bootstrap uses the good practice of not overspecifying it's CSS, so anything that matches .glyphicon should work, whether it's an i or a span.

They do however recommend span instead of i now, which is a change from 2.3. I'm not sure why, I assumed it was accessability related but can't quickly find any documentation as to why.

But, since the actual class names all changed too (partly for performance reasons) that's all academic as it's easy enough to change the span while changing the classes.
評比平均分數： -
In reply to Mary Evans

Re: Bootstrap 3 and Glyphicons Halflings font

由Giuseppe L'Abbate發表於

I’m trying to customize a little the clean theme in moodle 2.9. I’ve start without cloning the theme or making a child theme. I’m just trying to add some small css and to introduce some bootstrap typical code as in the sample from Mary Evans https://moodle.org/mod/forum/discuss.php?d=267662.

Now my task is add glyphicons to the front page and if possible to the navbar items.

I’ve add the following css code but I’m not able to load the font.

@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.woff2') format('woff2'), 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');

}

.glyphicon {

  font-family: 'Glyphicons Halflings';

}

.glyphicon-search:before {

  content: "\e003";

}

.glyphicon-pencil:before {

  content: "\270f";

 

1.      Is this code correct ?

2.      Where I should put the fonts folder derived from bootstrap ?

Thank you very much,

Giuseppe

PS: <i> with icon is working properly
評比平均分數： -
In reply to Giuseppe L'Abbate

Re: Bootstrap 3 and Glyphicons Halflings font

由Mary Evans發表於

Ciao Giuseppe,

quasi corretto ... pochi errori - lasciatemi spiegare...

You have most of it right, the only thing that I can see wrong is the URL for the src URL.

You need to follow the example given by Gareth

Cheers

Mary

評比平均分數： -
In reply to Mary Evans

Re: Bootstrap 3 and Glyphicons Halflings font

由Giuseppe L'Abbate發表於

Thank you very much,

debugging the page I’ve found that, with my code, the fonts where expected to be at same level of moodle in a directory called “fonts”. I’ve copy my “fonts” directory to the server and every things seems to be working properly. Probably is a dirty solution ( I’m new of moodle ).

In order to be able to render all glyphicons I’ve add all the related css and not only the two ones I’ve posted before. You suggest to link an additional external css file or it’s correct to add custom css trough the “clean” setup ?

As second step I’ve tried a real "dirty" solution for custom items in the navbar and under “theme setting” I’ve insert an item description referring to glyphicon:

&nbsp;| https://moodle.org" class="glyphicon glyphicon-grain| Progetti

 

This “horrible” solution works without text otherwise the font don’t match with the other items.

Probably I’ll need to do something more clean (do you suggest a cloned theme ?) and take more time to understand moodle structure.

 

Thank you all once more, have a nice day,

Giuseppe

評比平均分數： -
In reply to Giuseppe L'Abbate

Re: Bootstrap 3 and Glyphicons Halflings font

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi Giuseppe,

Horrible solution, did you read How_to_add_custom_fonts_in_a_theme and what Mary said?

Another example is: https://github.com/gjb2048/moodle-theme_essential/blob/master/style/fontawesome-woff2.css and https://github.com/gjb2048/moodle-theme_essential/tree/master/fonts.

Gareth

評比平均分數： -
In reply to Gareth J Barnard

Re: Bootstrap 3 and Glyphicons Halflings font

由Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

One point to make for future readers - the original thread here relates to bootstrap 3 and glyphicons in a custom theme - Clean uses bootstrap 2. That may not be directly relevant to the issue guiseppe has asked about, but may be to other readers at a later stage. 

評比平均分數： -
In reply to Gareth J Barnard

Re: Bootstrap 3 and Glyphicons Halflings font

由Giuseppe L'Abbate發表於

Thank you all very much,

I follow the instructions in How_to_add_custom_fonts_in_a_theme and glyphicons are working properly. In this way, I was “forced” to change the custom.css file and to add a directory “fonts” into the clean theme directory. Do you consider “fine” to modify a theme without making a clone or a child? I suppose that a new release of the clean theme may change my customizations, I’m wrong?

Two additional questions about bootstrap and glyphicons:

-        Considering that Glyphicons Halflings is a particular kind of fonts used to “draw” icons and that it could be used in many different themes, it could be useful not to reply it in each theme ?

-        The Bootstrapbase and the clean theme will use Bootstrap 3 in the next future ?

Giuseppe

評比平均分數： -
In reply to Giuseppe L'Abbate

Re: Bootstrap 3 and Glyphicons Halflings font

由Mary Evans發表於

Hi,

It is better to make a clone or a 'child' theme. In fact I would say it is is easier to make a child theme as you only need certain files.  So adding  just the 'fonts' and 'settings' is easier in a child theme. 

The 'Glyphicon-Halflings' were released in 'Bootstrap 3' but can be used in any theme without Bootstrp3..

 To use these fonts you need to add the fonts folder and also add the corresponding CSS into your style directory and also reference this in your theme's config.php under $THEME->sheets = array=' ';

As for Bootstrap3 in Moodle well that is in the lap of the Moodle HQ Gods! Who knows what they are cooking up! They are doing so much more with the Bootstrap 2.3.2 that we have now, Unless they are preparing a new kind of 'Moodlestrap' to launch them into the 22nd Century?

We are just so thankful we can have jQuery in Moodle!

Cheers

Mary

評比平均分數：Useful (1)
In reply to Giuseppe L'Abbate

Re: Bootstrap 3 and Glyphicons Halflings font

由Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

Almost certainly bootstrpbase and clean wont switch to bootstrap 3, but there is work going on to bring a bootstrap3 'base' theme into core, although I haven't been around much the last few weeks to see the progress (if any) being made on that.

I believe the logic is that Bootstrapbase and clean will stay fairly much as they are to avoid the issues of child/cloned themes breaking if they were upgraded to BS3.

Also 100% agree with Mary's comments above. The usual recommendation is NOT to edit the core themes themselves as your edits can be lost on any upgrade. Whether to clone or create a child depends on your views on maintaining your changes and how many changes you want to make. For relatively small changes such as the fonts you are tlaking about, I'd go with a fairly minimal child theme, personally - as Mary suggests.

評比平均分數： -