If you would like to include social media links to your Moodle or Totara Learn site in a stylish way and without adapting the theme, 'Font Awesome' is a easy and simple solution. This method also offers the ability to
customise the size and colour of the icons to suit the branding of the site.
To start using 'Font Awesome' in your Moodle or Totara LMS site, you will first need to add the Bootstrap CDN to your site. To do this navigate to https://fortawesome.github.io/Font-Awesome/get-started/ and copy the following code:
This code can then be pasted into the <head> section of your site's HTML. To do this in Moodle and Totara LMS you will need to be logged into your site as an administrator, then navigate to Site administration > Appearance > Additional HTML and paste the code into the ‘Within HEAD’ section and then click 'Save'.
Now you need to find the icons you wish to use. Navigate to https://fortawesome.github.io/Font-Awesome/icons/ and search for the icons. Once you find the icon you can copy the line of code. The code will look something like the following:
This code can be placed into an HTML block on your site (or anywhere else where you can add code). To add an HTML block you will need to enable editing on the front page (Administration > front page settings > Turn editing on) then in the ‘Add a block’ block select ‘HTML’.
Before pasting the code into the block, first enable the HTML editor by clicking the icon like the image below.
Once the HTML editor is selected you can paste the code into the content section.
In order to add a link to the icon, you will need to change the code you pasted into the code below shown below:
This will allow the link to be clicked and the user will be taken to the webpage that the icon links to.
With the HTML editor not selected you should now be able to see the icon displayed:
.png?width=1080&height=150&name=Slim%20blog%20CTAs%20(16).png)
As you can see, this may need improving visually, so you will need to spruce it up a bit using some custom CSS. Save the changes you have made to the block and navigate back to the site home page.
How you add custom CSS to your theme will depend on which theme you use. In my example I will be basing the instructions on the Moodle 'clean' theme. To access the custom CSS for clean theme, navigate to Site administration > Appearance > Themes > Clean. You will then see a text box labelled ‘Custom CSS’.
To find the initial code to add for custom CSS you can use the developer tools option that is available for the "Google Chrome" web browser. To activate this option press the F12 key.
You should now see a menu display like the below image.
You can then use the icon highlighted in the image below to click on the icon within the block.
Once selected, the following details show now be visible in the ‘Styles’ section on the right hand site of the developer tools, as shown below. The actual ‘content’ value will vary from your own.
Copy the code like the image below and paste it into the custom CSS.
As the icon is considered a 'font' in the CSS, to make it appear larger you can include the following line in the custom CSS. You can change the value to one you feel is suitable, in my example I’m using font size 75px.
To change the colour the icon displays in add the following line to the custom CSS. The ‘#3B5998’ is a hexcode colour, in this case it is the Facebook blue. You can find the hexcode colour used in other logos online.
Now that the custom CSS has been added, save the changes you have made. You should now see the icon display in the size and colour you have chosen. You can then repeat the steps above for other icons also.
About Hubken:
HubkenCore is our all-in-one learning package that comprises powerful, flexible and tailored LMS services for organisations of all sizes. Leveraging the power of Moodle or Totara platforms, we provide you with the tools to achieve outstanding e-learning outcomes, supporting you in areas including LMS hosting, installation, user training, content development, reporting and more.
Explore HubkenCore – our unique SaaS LMS offering
Ready to see how our new LMS bundled solution is revolutionising how you purchase an e-learning solution?
