Welcome to the Moodle Banner Maker

Version 1.3a

---

Basic instructions

1. Start filling in the relevant fields - they will update the preview dynamically
2. To change the icon, click the arrow next to the picture; you can search by keyword, and then 'click' to select the icon you wish to use
3. Using the 'code view', copy the generated HTML code at the bottom into a Moodle Label or Page

---

Banner Text:

Banner Colour:

Text Colour:

White Black

Banner Icon:

Toggle Dropdown

No Icon

Banner Height:

Short Standard Large

Banner Width:

Small Medium Long

End Capping:

---

Banner Preview

---

Generated Code

Copy and paste into a label, or other HTML block

<script src="https://kit.fontawesome.com/6aeb437c07.js" crossorigin="anonymous"></script> <div style="display: flex; align-items: center; color: white; font-size: 20px; width:60%; height: 60px; border-radius: 75px 0px 0px 75px; background: #FF5447; padding-left: 25px; font-family:lato; font-weight: 900; letter-spacing: .8px"> <i class="fa fa-icicles fa-2x " style="color:white; margin-right: 10px;"></i>Sample Heading</div>