Read on to see how to take a smarter approach and adopt a minimal set of icons that fits most modern needs.Įditor’s note 2022: With the arrival of the new year, this post has been slightly modified to reflect the fact that this content is still relevant!Įditor’s note 2023: Once again, we’ve made sure we’ve got up-to-date info here! Frontend developers currently have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. In the text field "Within HEAD" insert the provided code line.It’s time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. and after that you will get a single code line. You will have to enter your email address. Please visit the Font Awesome project site at In this case, you can use an optional way to load the icon font to your Moodle site. This has the advantage that the icon font is already embedded without any further settings and that it can also be displayed in testing environments without an internet connection.īut if a new version of Font Awesome is released, you won't be able to use the latest icons which were added to the new version. The icon font is included in your download of Theme Lambda. On the font Awesome project page, they present some new icons which I can't use In the text field "Within HEAD" add this line: Please try the following steps:Īs an administrator go to "Site administration" > "Appearance" > "Additional HTML". If the problem with the icons persist, you can use an optional way to load the icon font. Theme designer mode may be deactivated via "Administration" > "Appearance" > "Themes" > "Theme settings". If the icons don't show up even at the blocks, try the following steps:įirst of all, try to deactivate the designer mode. If the icons show up here and you have problems that new icons you have included in the HTML by using the text editor, please read the "General Recommendation" right above. Especially, each Moodle block should have an icon to the top left: The Font Awesome icons don't show up at all!įont Awesome icons are used throughout the theme. Text editors can be enabled, disabled or a different one set to default from "Administration" > "Site administration" > "Plugins" > "Text editors" > "Manage editors". If you are using a Moodle version 2.7 or higher, make sure the Atto editor is your default editor. Atto is a javascript text editor built specifically for Moodle and it is the default text editor in Moodle from 2.7 onwards.ĭownload Atto text editor for Moodle 2.5 or Moodle 2.6 So if your are working with Moodle version 2.5 or 2.6, I recommend installing the Atto editor. If you are working with a Moodle version prior to 2.7 or if you are using the TinyMCE as your default editor in Moodle 2.7 or 2.8, there will be certain cases in which the editor deletes all tags on saving (see also: ). General Recommendation: Using the Atto editor The complete Font Awesome icon reference.To learn more about how to add and use the Font Awesome icons, the best place to start is the Font Awesome project site: In the preview of the editor you should now see the Font Awesome icon. Look for your placeholder text "ICON" and replace it with the HTML for the icon.Ĭlose the HTML/code view. Now go to the Font Awesome project page to choose an icon.įor this example, we choose the "check-circle" icon (left-click).īack in Moodle, switch the edtor to HTML/code view (see also: ). Note: If you change the font-size of the icon's container (here the paragraph where you place the icon), the icon will get bigger, too. You can now format the text, for example use a heading format to increase the font-size. For those who are not familiar with HTML, it is a good idea to use a placeholder for the icon: To make sure that these informations will not be missed, you want to mark them with an icon.įirst, we start with the text for the new label. Let's say you want to add some kind of general informations about your course which your users should read before they begin. Now you can add resources via the "Add an activity or resource" link. To edit a course section you always have to turn editing on first. Let's add a label containing a Font Awesome icon to a Moodle course. Same things goes for color,ĭrop shadow, and anything else that gets inherited using CSS. If you change the font-size of the icon's container, the icon gets bigger.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |