Adding Font Awesome in Navbar

Adding Font Awesome in Navbar

by Vikram Ladva -
Number of replies: 15

Hi!!

I am looking for a code that will enable me to add font awesome in navbar in Theme essential. I have tried on theme setting page to include it but failed.


Happy Holidays.

Average of ratings: -
In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

There are various navbars in Moodle, just wondering which one you mean?

In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Essential already has FontAwesome included, the icons you see are FontAwesome.  You can find examples here: http://fortawesome.github.io/Font-Awesome/examples/.

What exactly are you trying to accomplish?

In reply to Gareth J Barnard

Re: Adding Font Awesome in Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
In reply to Mary Evans

Re: Adding Font Awesome in Navbar

by Vikram Ladva -
Hi!!
Mary & Gareth,

I got it. there is no simple way to use the fonts in Navigation bar unless one does core programing in CSS. Its not my cup of tea as I am prof of Mathematics. Thanks for your suggestions.

One thought and request, in the nest upgrade try to include the fonts awesome in navigation bar with easy input method, like one you have for custom menu items.

Regards, 

Mary Christmas and Greetings for the new season.
In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Vikram,

Merry Christmas and a Happy New Year to you.

With "One thought and request, in the nest upgrade try to include the fonts awesome in navigation bar with easy input method, like one you have for custom menu items", as I said, FontAwesome is available, but I still do not know what you want to actually achieve.  I cannot complete your request because I do not know what you want, i.e.:

FontAwesome in Navbar = ??????

I am unable to solve the equation because I do not know what both sides are.

Like:

FontAwesome in Navbar = User entered text with icon.

FontAwesome in Navbar = Icon with link.

Kind regards,

Gareth


In reply to Gareth J Barnard

Re: Adding Font Awesome in Navbar

by Vikram Ladva -

Dear Gareth,


This is specially for you as you don't get my point. Please see the attached pdf which shows were actually i need font awesome to be. As I am not a computer person please forgive meif i have used wrong terminology.


I hope all clear.


Thanks,


Vikram
In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
Hi Vikram,
I think Gareth's point is that what you are pointing to in your image is simply a navigation bar that can hold many different things. While fontaweseom is a style of icon images that can be added to various things using css.
It would be possible to add fontawesome icons to the menu bar and even have them link to other pages/urls, simply by adding a few lines into the php layout file, but that probably wouldn't integrate properly with the responsiveness of the bar and the menus in it -  my guess is that Mary's assumption is the correct one and what you are actually after is a way of adding font-awesome icons to entries in the custommenu.
If those are permanent, then they could be added into the custommenu renderer itself, as they already are in some themes (such as the Home and My Courses items in the screenshot you provided). Unfortunately, as stated in other posts, there is currently no way to add fontawesome icons into the existing custommenu setup.
Possibly the relevant css to add the fontawesome icons might be added using nth child css selectors once the custom menu has been set up? http://www.w3schools.com/cssref/sel_nth-child.asp

Richard
In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Vikram,

I still do not know what you want, Essential already has FontAwesome.  FontAwesome is just a font like any others, but has icons instead.  Please could you give some more detail or sketches to explain what text / icons you want.  What are you trying to achieve?  What should the solution look like?

Gareth

In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Vikram, 

There is a theme I created two years ago at least, which adds icons similar to those you want in the top navbar menu, which I believe is what you are looking for?

Unfortunatly, the menu I created only adds the same icon when a menu link has a sub menu. You can read about that theme HERE

It works in Moodle 2.4/5/6/7/8

If you want you can try it out. You can dowload Tiny Bootstrap from HERE

If you want to discuss this theme open a new discussion.

Thanks

Mary

In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Vikram,

Wouldn't it be great if we could add icons to the links in the Custom Menu just as we can with the User Menu.

This of course would need a renderer making, and I am not sure how hard this would be, but would be worth looking into.

Kind regards and  Happy Chritmas to you too.

Mary

In reply to Mary Evans

Re: Adding Font Awesome in Navbar

by ryan sanders -

i take you are talking about...

site admin menu -> appearance -> themes -> theme settings

"custom menu" doesn't state it does, wonder if you could insert some css or a html image tag before the menu text. with statement of using a | "pipe character" by the enter key on keyboard. css/html should not interfere with code, or less moddle strips html / css from this textarea box before saving it to the database.




In reply to ryan sanders

Re: Adding Font Awesome in Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Yes, we are talking about the Custom Menu. However, in Moodle 2.8 there is a User Menu that you can add links to in the Theme setting page in much the same way as the Custom Menu, the only difference is that you can also add the name of the icon, like badge, book, course etc., 

You can see what I mean in  http://demo.moodle.net 

In reply to Vikram Ladva

Re: Adding Font Awesome in Navbar

by ryan sanders -
site admin menu => appearance => themes => theme settings...


Default: Empty

You can configure a custom menu here to be shown by themes. Each line consists of some menu text, a link URL (optional), a tooltip title (optional) and a language code or comma-separated list of codes (optional, for displaying the line to users of the specified language only), separated by pipe characters. You can specify a structure using hyphens, and dividers can be used by adding a line of one or more # characters where desired. For example:

Moodle community|https://moodle.org
-Moodle free support|https://moodle.org/support
-###
-Moodle development|https://moodle.org/development
--Moodle Docs|http://docs.moodle.org|Moodle Docs
--German Moodle Docs|http://docs.moodle.org/de|Documentation in German|de
#####
Moodle.com|http://moodle.com/
i am in 2.9dev moodle. and getting some errors when trying below, possibly created by myself, doing some other things *looking innocent* 

<img src="www.mysite.com/my_mini_icon.jpg">Moodle.com|http://moodle.com/ 

 i thought in older versions 1.x you were allowed to inject some css/html into these lines? or there was a similar ability? beyond the notation of "user menu" further below on the page.

In reply to ryan sanders

Re: Adding Font Awesome in Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

If yoy look further down the Themes setting page there is another setting for User menu that allows you to add icon names to the link name before the 'pipe' this then displays the icon before the link title and can be overridden in a renderer easily enough in order to convert to Font Awesome. However, this menu is overridden totally in Essential theme as it existed prior to the Moodle version of that menu.

What you cannot do, and this is the crux of this discussion, is add icons to the main menu as you are trying to do.

There is nothing stopping you adding a menu as we use to do in Moodle 1.9, if coded correctly it still works, and in my opinion looks and works better than the Bootstrap one, and best of all you can add the icons you want too. But if going down that route you can customise the Bootstrap 2.3.2 navbar code that you can find in the link I added in an earlier comment to Vikram.

Cheers & Happy Christmas

Mary