Icon • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Silhouette of a bird resting on a branch

Photo by Zdeněk Macháček

Icon

Introduction

Natura11y has its own icon library. It also supports Font Awesome if that's what you prefer. If you do use Natura11y's icons, you can add your own custom icons to the library.

Icon Font CDN

Place the Natura11y icon font <link> tag in the <head> of your document. Add icons to your markup with <span> or <i> tags. The first .icon class is used for general styling. The second .icon-{x} class specifies which icon to use. Here x equals the icon name (Figure 1).


        <!-- Natura11y Icon CSS -->
        <link href="https://cdn.jsdelivr.net/npm/natura11y-icons@v1/dist/natura11y-icons.min.css" rel="stylesheet" />
        
        <!-- Icon HTML: your choice of <span> or <i> tags -->
        <span class="icon icon-home 👈"></span>
Figure 1

Adding Custom Icons

Add to Natura11y's icon library (for Use with your own projects). OR completely create your own custom icon font.

Head over to Naturally's icon repo Naturally's icon repo to get started.

Using Font Awesome

You don't have to use Natura11y's icons. Since version 2, Naturally fully supports Font Awesome.

Step 1: Include your Font Awesome kit and markup

If you don't already have one, create your Font Awesome kit and place the <script> tag in the head of your document (Figure 2). Then include Font Awesome icon markup in your document.


        <!-- Font Awesome Icon Kit -->
        <script src="https://kit.fontawesome.com/your_kit_id.js" crossorigin="anonymous"></script>
        
        <!-- Font Awesome Icon HTML -->
        <span class="fas fa-frog 👈"></span>
Figure 2

Step 2: Update CSS pseudo-elements unicodes

Naturally uses CSS pseudo-elements for certain elements in forms. If you're using Font Awesome on a page with form elements, you'll need to update the following custom properties. These properties set each unicode value for basic form elements such as input radios and checkboxes.


        :root {
            --icon-required: "\f14a";
            --icon-checkbox-unchecked: "\f10d";
            --icon-radio-unchecked: "\f138";
            --icon-radio-checked: "\f137";
        }
Figure 4

You're all set! You can now use Font Awesome icons in your Natura11y project.