Icons

Icons are powerful tools for adding visual elements to web design. Icons can enhance user experience and the aesthetics of the site. Using icons in MIZ allows you to easily add desired icons and customize them according to your design needs.

Connect Icon #

Add the icon CSS file to your HTML page. This file can be stored locally in your project or included via a CDN link.

                    <html>
    <head>
        <link rel="stylesheet" href=".../assets/css/icons/fontawesome/css/all.css">
    </head>
    <body>
        <i class="fa-solid fa-bars icon-large icon-md-medium"></i>
    </body>
</html>

HTML

Icon Classes #

In MIZ, specific classes are provided for managing the size of icons. For example: icon-small Classes for setting small icon sizes. The size of this class is customizable, and you can change it as desired.

                    
<i class="fa-solid fa-bars icon-large icon-md-medium"></i>
                    

HTML

How to Add Icons #

To add icons to the project, follow these steps:

  1. Add your desired icon folder to the icons directory.

  2. Ensure that the files related to the icons are correctly placed in this folder and the folder structure is correctly maintained.

Examples#