| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Icons"
|
|
|
4 |
description: "Moodle icons are rendered with Font Awesome or as small images"
|
|
|
5 |
weight: 40
|
|
|
6 |
date: 2020-02-04T09:40:32+01:00
|
|
|
7 |
draft: false
|
|
|
8 |
tags:
|
|
|
9 |
- available
|
|
|
10 |
---
|
|
|
11 |
|
|
|
12 |
## Description
|
|
|
13 |
|
|
|
14 |
Most Moodle icons are rendered using the 6.5.1 versions of [Fontawesome](https://fontawesome.com/v6/search). Iconnames are mapped from the Moodle icon name to the Font Awesome icon names in `/lib/classes/output/icon_system_fontawesome.php`
|
|
|
15 |
|
|
|
16 |
If needed a theme can override this map and provide its own mapping.
|
|
|
17 |
|
|
|
18 |
## Rendering icons in Mustache Templates
|
|
|
19 |
|
|
|
20 |
Icons can be rendered in moodle templates using this notation:
|
|
|
21 |
|
|
|
22 |
```{{#pix}} i/edit, core {{/pix}}```
|
|
|
23 |
|
|
|
24 |
## Rendering icons in Php
|
|
|
25 |
|
|
|
26 |
Use the pix_icon method to retreive the HTML for an icon.
|
|
|
27 |
|
|
|
28 |
{{< php >}}
|
|
|
29 |
$icon = $OUTPUT->pix_icon('i/edit', 'Edit me', 'moodle');
|
|
|
30 |
{{< / php >}}
|
|
|
31 |
|
|
|
32 |
Options:
|
|
|
33 |
|
|
|
34 |
## Stacking Font Awesome icons
|
|
|
35 |
|
|
|
36 |
{{< example >}}
|
|
|
37 |
<span class="fa-stack fa-lg">
|
|
|
38 |
<i class="fa-solid fa-comment fa-stack-2x"></i>
|
|
|
39 |
<i class="fa-solid fa-thumbs-up fa-stack-1x fa-inverse"></i>
|
|
|
40 |
</span>
|
|
|
41 |
|
|
|
42 |
<span class="fa-stack fa-2x">
|
|
|
43 |
<i class="fa-solid fa-camera fa-stack-1x"></i>
|
|
|
44 |
<i class="fa-solid fa-ban fa-stack-2x" style="color:Tomato"></i>
|
|
|
45 |
</span>
|
|
|
46 |
|
|
|
47 |
<span class="fa-stack fa-2x">
|
|
|
48 |
<i class="fa-solid fa-square fa-stack-2x"></i>
|
|
|
49 |
<i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
|
|
|
50 |
</span>
|
|
|
51 |
|
|
|
52 |
<span class="fa-stack fa-4x">
|
|
|
53 |
<i class="fa-solid fa-square fa-stack-2x"></i>
|
|
|
54 |
<i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
|
|
|
55 |
</span>
|
|
|
56 |
{{< /example >}}
|
|
|
57 |
## List of mapped Font Awesome icons
|
|
|
58 |
|
|
|
59 |
The top title of each cards displays the name of the icon. The icon shown left is the Font Awesome icons. The icon shown on the right is the old image base icon.
|
|
|
60 |
|
|
|
61 |
{{< moodleicons >}}
|