Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1 
---
2 
layout: docs
3 
title: "Icon Sizes"
4 
date: 2020-04-27T09:40:32+01:00
5 
draft: false
6 
weight: 5
7 
---
8 
 
9 
Moodle icons are usually rendered using the template ```{{pix}}``` helper.
10 
 
11 
For example:
12 
 
13 
```{{#pix}}t/up, moodle, {{#str}} up, moodle {{/str}}{{/pix}}```
14 
 
15 
which results in
16 
 
17 
{{< example show_preview=true >}}
18 
  <i class="icon fa fa-arrow-up fa-fw " title="Up" aria-label="Up"></i>
19 
{{< /example >}}
20 
 
21 
## Controlling the icon size
22 
 
23 
Use the ```icon-size-x``` classes to control the icon sizes.
24 
 
25 
{{< example show_markup=false >}}
26 
<div class="d-flex">
1441 ariadna 27 
  <div class="icon-size-1 card bg-light me-2">
1 efrain 28 
    <div class="card-body d-flex justify-content-center align-items-center">
29 
    <i class="fa fa-arrow-up icon"></i>
30 
    </div>
31 
    <div class="card-footer">
32 
    icon-size-1<br>4px
33 
      </div>
34 
  </div>
1441 ariadna 35 
  <div class="icon-size-2 card bg-light me-2">
1 efrain 36 
    <div class="card-body d-flex justify-content-center align-items-center">
37 
    <i class="fa fa-arrow-up icon"></i>
38 
    </div>
39 
    <div class="card-footer">
40 
    icon-size-2<br>8px
41 
      </div>
42 
  </div>
1441 ariadna 43 
  <div class="icon-size-3 card bg-light me-2">
1 efrain 44 
    <div class="card-body d-flex justify-content-center align-items-center">
45 
    <i class="fa fa-arrow-up icon"></i>
46 
    </div>
47 
    <div class="card-footer">
48 
    icon-size-3<br>16px (default)
49 
      </div>
50 
  </div>
1441 ariadna 51 
  <div class="icon-size-4 card bg-light me-2">
1 efrain 52 
    <div class="card-body d-flex justify-content-center align-items-center">
53 
    <i class="fa fa-arrow-up icon"></i>
54 
    </div>
55 
    <div class="card-footer">
56 
    icon-size-4<br>24px
57 
      </div>
58 
  </div>
1441 ariadna 59 
  <div class="icon-size-5 card bg-light me-2">
1 efrain 60 
    <div class="card-body d-flex justify-content-center align-items-center">
61 
    <i class="fa fa-arrow-up icon"></i>
62 
    </div>
63 
    <div class="card-footer">
64 
    icon-size-5<br>32px
65 
      </div>
66 
  </div>
1441 ariadna 67 
  <div class="icon-size-6 card bg-light me-2">
1 efrain 68 
    <div class="card-body d-flex justify-content-center align-items-center">
69 
    <i class="fa fa-arrow-up icon"></i>
70 
    </div>
71 
    <div class="card-footer">
72 
    icon-size-6<br>40px
73 
      </div>
74 
  </div>
75 
</div>
76 
{{< /example >}}