Quick Start

BrickMMO has its own unique set of icons! Come and explore how to use and integrate them into your different pages. Developed by the BrickMMO community, these icons are completely free to use. Enhance your project with our custom-made icons!

We'll cover the basics of setting up BrickMMO Icons and finding the perfect icon for your project. This video will walk you through the steps below:

1. Setup BrickMMO Icons in Your Project

BrickMMO Icon CDN is the easiest way to get BrickMMO icons into your projects. Just grab the code and add the CDN code to the head of each template or page of your project where you want to add icons.

2. Find and Add Icons

Browse the different icons in v1 to find some icons you like and then add the icon name and style as CSS classes to an HTML <i> tag.

3. Make It Awesome

Alright, BrickMMO enthusiasts, strap in and get ready to level up your game! It's time to elevate your gameplay to the next level with our own Icons. Let's rock those virtual bricks and roll through the challenges with unbeatable flair!

Styling with BrickMMO Icons

In this Section we are going to explain where and how to add the styles as well as we are going to show you some examples

The first thing you need to understand is that the color will be defined within the style attribute, whereas the sizes will be added to the class attribute where you specify the icon to illustrate. The color will be defined using the hexadecimal system, but if you prefer, you can use the RGB system if it's easier for you. Instead, the size will appear alongside the icon's alias. In many cases, you will see a period (.) before the class name, for example: bm-xs. This is because the period (.) signifies the CSS class selector.

Styling Basics

The icons developed by BrickMMO have the option to adopt the size and color defined by the CSS of their parent element. This feature ensures seamless integration and behavior according to the text where they are placed, maintaining appropriate visual alignment and consistency.

Below, you can see an example of how to apply styles with CSS that will be applied to BrickMMO icons.

Colours Icons

Icons designed for BrickMMO allow you to add any color you want. That's why you'll have the option to choose from these colors or add your own.

To see examples of colors you can add, please refer to this table. You can use these examples either in the inline style or by clicking on one of the options provided in the previous image.

Sizing Icons

This tool presents six different classes that allow you to adjust the icon size as you desire. The unit of measurement is em → (1em is equal to the current font size) . Additionally, the developed icons allow you to use other size units, which can be done through inline style. If you wish to do so, it will not be necessary to use the in-built classes with the prefix bm-. Instead, you can simply add the font-size. Below you will find a table of the developed classes and other dimensions you can use.

How To Add Icons

You can position Brickmmo icons almost anywhere, and we've designed them to seamlessly adopt the traits of the surrounding text, ensuring they integrate naturally.

In this section, you'll learn how to seamlessly incorporate icons into your project. We'll cover how to style these icons effectively and explore the various classes that BrickMMO Icons provide, enabling you to customize and enhance your design with ease.

Basics

To include an icon, you need to be aware of a few key details:

Add Icons to HTML

We crafted BrickMMO for seamless integration with inline elements. For styling, utilize the appropriate CSS classes from BrickMMO for your desired icon style, and include the icon name class prefixed with bm- for selecting the specific icon. Accessibility-conscious individuals might consider using the <span> element as an alternative to <i>.

Here's an example:

Which Icons do we have?

BrickMMO presents a major extension of Icons in its Version 1.0. Each of these Icons will be used in various stations and/or tools, enabling this project to create Smart Cities. Below you will find a list of each Icon with its corresponding icon.

How To Style Icons

Although you can add inline styles such as font-size, we have created some Styles that will allow you to change the color and size of the icon. This will allow you to change the colors and sizes as you want.

To make changes, first click on the color palette. This will allow you to see the options we have for colors and sizes.

Setting Color:

Among the colors, you will find those that identify BrickMMO, which are:

• Gray → #858485
• Orange → #EF5D23
• Red → #EC2225
• Additionally, there is a field to choose any color you prefer.

Setting Size

Similarly, you will find 6 different sizes, which are:

• .bm-2xs → font-size: .625em;
• .bm-xs → font-size: .75em;
• .bm-sm → font-size: .875em;
• .bm-lg → font-size: 1.25em;
• .bm-xl → font-size: 1.5em;
• .bm-2xl → font-size: 2em;

Run into a problem?

Double-Check Your Code

If your <i> aren't displaying, make sure you've got the latest BrickMMO Icons CDN