Fork me on GitHub

Inuit Village

_objects.md-icon.scss

Source code

View source

Author

Package Name

a73-inuit-md-icon-objects

Version

0.1.7

Dependences

This is an intention to use an icon font within InuitCSS framework

This Igloo uses the Material Design Icon Font from Google, and it is oriented to use font ligatures to display the symbols

If you haven't heard about font ligatures, you should read this article. It will change your way of thinking about how to display font icons (there is no need to create a class for every icon anymore)

This Object also requires 2 other Igloos.
a73-inuit-md-icon-generics which is responsible of creating font-face
a73-inuit-md-icon-settings that has some font settings plus the codepoints and ASCII code to represent the icons.
The codepoints are used as a reference, but you can easily used them to create specific classes for a single icon (in the case you need them).

Please don't forget to include also in your project the Material Design Fonts (Woff, ttf, etc)

Markup
Demo
Modifiers
Settings

The only important thing to consider is to use one of the named ligatures codepointsinside the tag

        <p>
            <span class="md-icon">arrow_drop_down</span>
            Lorem Ipsum
        </p>
        
        <!-- for browsers older than IE 10 you can use ASCII code -->
        <p>
            <span class="md-icon">&#xe5c5</span>
            Lorem Ipsum
        </p>

.md-icon

watch_later Lorem Ipsum Dolo et

 Lorem Ipsum Dolo et

see HTML code

<p class="demo">
                <span class="md-icon">watch_later</span>
                Lorem Ipsum Dolo et
            </p>
            <!-- For IE9 or below. -->
            <p class="demo">
                <span class="md-icon">&#xE924;</span>
                Lorem Ipsum Dolo et
            </p>

Modifiers

.md-icon--top

watch_later Lorem Ipsum Dolo et

watch_later Lorem Ipsum Dolo et

see HTML code

    <p class="demo">
                    <span class="md-icon md-icon--top">watch_later</span>
                    Lorem Ipsum Dolo et
                </p>
            
                <p class="demo" style="text-align: center">
                    <span class="md-icon md-icon--top">watch_later</span>
                    Lorem Ipsum Dolo et
                </p>

.md-icon--tiny-right

watch_later Lorem Ipsum Dolo et

see HTML code

    <p class="demo">
                    <span class="md-icon md-icon--tiny-right">watch_later</span>
                    Lorem Ipsum Dolo et
                </p>

.md-icon--small-right

watch_later Lorem Ipsum Dolo et

see HTML code

    <p class="demo">
                    <span class="md-icon md-icon--small-right">watch_later</span>
                    Lorem Ipsum Dolo et
                </p>

.md-icon--large-right

watch_later Lorem Ipsum Dolo et

see HTML code

    <p class="demo">
                    <span class="md-icon md-icon--large-right">watch_later</span>
                    Lorem Ipsum Dolo et
                </p>

.md-icon--huge-right

watch_later Lorem Ipsum Dolo et

see HTML code

    <p class="demo">
                    <span class="md-icon md-icon--huge-right">watch_later</span>
                    Lorem Ipsum Dolo et
                </p>

.md-icon--tiny-left

Lorem Ipsum Dolo et watch_later

see HTML code

    <p class="demo">
                    Lorem Ipsum Dolo et
                    <span class="md-icon md-icon--tiny-left">watch_later</span>
                </p>

.md-icon--small-left

Lorem Ipsum Dolo et watch_later

see HTML code

    <p class="demo">
                    Lorem Ipsum Dolo et
                    <span class="md-icon md-icon--small-left">watch_later</span>
                </p>

.md-icon--large-left

Lorem Ipsum Dolo et watch_later

see HTML code

    <p class="demo">
                    Lorem Ipsum Dolo et
                    <span class="md-icon md-icon--large-left">watch_later</span>
                </p>

.md-icon--huge-left

Lorem Ipsum Dolo et watch_later

see HTML code

    <p class="demo">
                    Lorem Ipsum Dolo et
                    <span class="md-icon md-icon--huge-left">watch_later</span>
                </p>

The md-icon object provides the following modifiers:

For adding left padding

md-icon--tiny-left
md-icon--small-left
md-icon--large-left
md-icon--huge-left

For adding right padding

md-icon--tiny-right
md-icon--small-right
md-icon--large-right
md-icon--huge-right

For displaying icon on top

md-icon--top

you can use the paddings if you explicit declare the variables to true

          $inuit-md-icon-left-paddings: false !default;
          $inuit-md-icon-right-paddings: false !default;

You can set modifiers for left and right paddings

                $inuit-md-icon-font-size: 24px !default;
                
                $inuit-md-icon-left-paddings: false !default;
                $inuit-md-icon-right-paddings: false !default;

Also you can redefine the $inuit-md-icon-horizontal-paddings MAP that contains the names for each modifier along with its value

                $inuit-md-icon-horizontal-paddings: (
                    tiny    : 4px,
                    small   : 8px,
                    large   : 16px,
                    huge    : 32px
                );