Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

Apache

System:

Linux 5.14.0-427.33.1.el9_4.x86_64

PHP Version:

7.4.33

User:

infinio

Directory:

/home/infinio/public_html/moodle/admin/tool/componentlibrary/content/moodle/themes

Free Space:

250.21 GB

🔧 Quick Actions

✏️ Editing: iconsizes.md

---
layout: docs
title: "Icon Sizes"
date: 2020-04-27T09:40:32+01:00
draft: false
weight: 5
---

Moodle icons are usually rendered using the template ```{{pix}}``` helper.

For example:

```{{#pix}}t/up, moodle, {{#str}} up, moodle {{/str}}{{/pix}}```

which results in

{{< example show_preview=true >}}
  <i class="icon fa fa-arrow-up fa-fw " title="Up" aria-label="Up"></i>
{{< /example >}}

## Controlling the icon size

Use the ```icon-size-x``` classes to control the icon sizes.

{{< example show_markup=false >}}
<div class="d-flex">
  <div class="icon-size-1 card bg-light mr-2">
    <div class="card-body d-flex justify-content-center align-items-center">
    <i class="fa fa-arrow-up icon"></i>
    </div>
    <div class="card-footer">
    icon-size-1<br>4px
      </div>
  </div>
  <div class="icon-size-2 card bg-light mr-2">
    <div class="card-body d-flex justify-content-center align-items-center">
    <i class="fa fa-arrow-up icon"></i>
    </div>
    <div class="card-footer">
    icon-size-2<br>8px
      </div>
  </div>
  <div class="icon-size-3 card bg-light mr-2">
    <div class="card-body d-flex justify-content-center align-items-center">
    <i class="fa fa-arrow-up icon"></i>
    </div>
    <div class="card-footer">
    icon-size-3<br>16px (default)
      </div>
  </div>
  <div class="icon-size-4 card bg-light mr-2">
    <div class="card-body d-flex justify-content-center align-items-center">
    <i class="fa fa-arrow-up icon"></i>
    </div>
    <div class="card-footer">
    icon-size-4<br>24px
      </div>
  </div>
  <div class="icon-size-5 card bg-light mr-2">
    <div class="card-body d-flex justify-content-center align-items-center">
    <i class="fa fa-arrow-up icon"></i>
    </div>
    <div class="card-footer">
    icon-size-5<br>32px
      </div>
  </div>
  <div class="icon-size-6 card bg-light mr-2">
    <div class="card-body d-flex justify-content-center align-items-center">
    <i class="fa fa-arrow-up icon"></i>
    </div>
    <div class="card-footer">
    icon-size-6<br>40px
      </div>
  </div>
</div>
{{< /example >}}

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: iconsizes.md

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation