Adding CSS, Icons and external stylesheets.

Adding CSS, Icons and external stylesheets.

by Joonas Heinonen -
Number of replies: 2

Hello there,

I've been trying to style my moodle page with external stylesheets. 


I've tried to use bootstap and font awesome icons, but after I click to save the page the moodle page deletes parts of my code. (the stylesheets)


Note, that I currently do not have admin rights in our organization. So I'm looking for a solution to add external stylesheets by default plugins and settings in the newest moodle version.

Here's the code:


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div style="display: inline-flex; justify-content: center; flex-direction: column;">
<div style="display: block;">
<center>
<h1 style="font-family:verdana; padding: .5rem;">
<i class="fas fa-home" style="padding-right: 0.5rem;"></i>Course Navigation
</h1>
</center>
</div>
</div>
</body>
</html>

My code looks like this:

Course Navigation

Average of ratings: -
In reply to Joonas Heinonen

Re: Adding CSS, Icons and external stylesheets.

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

Hi,

This will all depend on the version of Moodle your organization is currently using, and Moodle has all the necessary Bootstrap CSS as well as FontAwesome Fonts & CSS.

You cannot add the kind of HTML you are wanting to add as it is not allowed.

However, what you are trying to do can be achieved by just adding some simple HTML.

For example: Using the Text Editor in Moodle be it in a Course of on the Frontpage and adding this code (see below)

<a class="btn btn-primary btn-lg" href="#" role="button"><i class="fa fa-home"></i> Learn more »</a>
Learn more »


Which means you can add FontAwesome icons in Moodle provided the version is Moodle 3.3 onwards.

Hope this helps?


Average of ratings: -