Getting Started

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 Glyphs v2 icons!

We'll cover the basics of setting up BrickMMO Glyphs and finding the perfect icon for your project. This guide 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. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adding CDN | Icons BrickMMO</title>

  <!-- Adding CDN to the head tag -->
  <link rel="stylesheet" type="text/css" href="https://cdn.brickmmo.com/glyphs@1.0.0/icons.css" />
</head>

<body>

</body>
</html>

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. 

<body>
  <!-- Brick Overflow Icon -->
  <i class="bm-brick-overflow"></i>

  <!-- Bricksum Icon -->
  <i class="bm-bricksum"></i>

  <!-- Colours Icon -->
  <i class="bm-colours"></i>

  <!-- Events Icon -->
  <i class="bm-events"></i>

  <!-- Navigation Icon -->
  <i class="bm-navigation"></i>

  <!-- Parts Icon -->
  <i class="bm-parts"></i>

  <!-- QR Code Icon -->
  <i class="bm-qr"></i>

  <!-- Radio Station Icon -->
  <i class="bm-radio-station"></i>

  <!-- Train Icon -->
  <i class="bm-train"></i>

  <!-- Videokit Icon -->
  <i class="bm-videokit"></i>
</body>

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 explain where and how to add styles with examples.

Color is typically set inline via the style attribute, while sizes are applied via classes on the element. You can use hex or rgb for color. Size helpers appear alongside the icon class (for example: bm-xs).

Styling Basics

BrickMMO icons can inherit font-size and color from their parent, aligning with surrounding text. You can also set these directly.

Example:

<span style="font-size: 3em; color: DarkCyan;">
  <i class="bm-colours"></i>
</span>

<span style="font-size: 60px; color: DarkMagenta;">
  <i class="bm-qr"></i>
</span>

<span style="font-size: 4.25rem;">
  <span style="color: FireBrick;">
    <i class="bm-train"></i>
  </span>
</span>

Colours Icons

Icons accept any color. Here are some examples you can use inline or in CSS.

Colour Hexacode Code Style
Taupe Gray #858485 style="color: #858485;"
Flame (Vivid Orange) #EF5D23 style="color: #EF5D23;"
Fire Engine Red #EC2225 style="color: #EC2225;"
Blue #0000FF style="color: #0000FF;"
Aquamarine #7FFFD4 style="color: aquamarine;"
DarkSalmon #E9967A style="color: darksalmon;"
DeepPink #FF1493 style="color: deeppink;"
LightBlue #ADD8E6 style="color: lightblue;"
Teal #008080 style="color: teal;"

Sizing Icons

Use these helper classes to scale icons by em. You can also set font-size inline if you prefer.

Size Class bm Class Example
2-Extra Small bm-2xs <i class="bm-events bm-2xs"></i>
Extra Small bm-xs <i class="bm-navigation bm-xs"></i>
Small bm-sm <i class="bm-parts bm-sm"></i>
Large bm-lg <i class="bm-qr bm-lg"></i>
Extra Large bm-xl <i class="bm-timeline bm-xl"></i>
2-Extra Large bm-2xl <i class="bm-train bm-2xl"></i>

How To Add Icons

You can place BrickMMO icons almost anywhere. They inherit text properties for natural alignment.

In this section you'll learn how to include icons, style them, and use the classes that BrickMMO provides.

Before You Get Started

Make sure you've added the CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.brickmmo.com/glyphs@1.0.0/icons.css" />

Basics

You need:

Add Icons to HTML

We crafted BrickMMO for inline elements. Use the icon class and include the name prefixed with bm-. You can also use <span> for accessibility-conscious markup.

Example:

<!-- Using <i> with the `colours` icon -->
<i class="bm-colours"></i>

<!-- Or use a <span> -->
<span class="bm-colours"></span>

Which Icons do we have?

BrickMMO v1 provides a set of icons used across stations and tools. Here is the list and their usage.

BrickMMO Icon Code Icon
BrickOverflow <i class="bm-brick-overflow"></i>
Bricksum <i class="bm-bricksum"></i>
Brix <i class="bm-brix"></i>
Colours <i class="bm-colours"></i>
Control Panel <i class="bm-control-panel"></i>
Events <i class="bm-events"></i>
Flow <i class="bm-flow"></i>
Navigation <i class="bm-navigation"></i>
Parts <i class="bm-parts"></i>
QR Codes <i class="bm-qr"></i>
Radio Station <i class="bm-radio-station"></i>
Train <i class="bm-train"></i>
VideoKit <i class="bm-videokit"></i>

How To Style Icons

You can use inline styles but we also provide helpers for color and size. Mix and match as needed.

Setting Color

BrickMMO brand colors:

You can always choose any color you like.

Setting Size

Six preset sizes:

Run into a problem?

Double-Check Your Code
Ensure you use the latest CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.brickmmo.com/glyphs@1.0.0/icons.css" />

Congratulations! 🎉

You've learned how to implement and style BrickMMO Icons. Use our icon library to enhance your apps with custom, high-quality icons.

Always include the CDN link and experiment with sizes and colors. The BrickMMO community is here to help.

💡 Quick Tips:

  • Test icons across devices and screen sizes
  • Use semantic elements like <i> or <span>
  • Stick to BrickMMO palette for consistency
  • Explore the Icons page to discover all icons