font_webatlas v2.2.0

README

Introduction

Font WebAtlas is an icon module designed for the creation of interfaces and web applications.

Package managers

npm install font_webatlas

Quick Start

Import the css files as shown below :

<link rel="stylesheet" type="text/css" href="node_modules/font_webatlas/webAtlas.css">
<link rel="stylesheet" type="text/css" href="node_modules/font_webatlas/font-face/webAtlas-original.css">

In this example, the default theme is original. See the "Choice of theme" section to change the theme.

Use

Add icon icon_name in the class attribute of an element.

<!-- Displays the icon as a block -->
<i class="icon login"></i> Sign in

<div> tags are also usable.

Or add icon-first icon_name in the class attribute of an element.

<!-- Displays the icon as the first letter of your block -->
<i class="icon-first login">Sign in</i>

List of icons

See the list on this link : lmoraes.fr/font_webatlas

Click on the icon you want to import, then click on Copy class or Copy HTML button to copy the code to the clipboard

Choice of theme

5 themes (including 2 variants) are available :

• Original
• Sharp
• Outline
• Outline-filled (variant of Outline)
• Pixel (variant of Sharp)

Copy the link corresponding to the desired style :

<!-- Theme Original -->
<link rel="stylesheet" type="text/css" href="node_modules/font_webatlas/font-face/webAtlas-original.css">

<!-- Theme Sharp -->
<link rel="stylesheet" type="text/css" href="node_modules/font_webatlas/font-face/webAtlas-sharp.css">

<!-- Theme Outline -->
<link rel="stylesheet" type="text/css" href="node_modules/font_webatlas/font-face/webAtlas-outline.css">

<!-- Variant Outline-filled -->
<link rel="stylesheet" type="text/css" href="node_modules/font_webatlas/font-face/webAtlas-outline-filled.css">

<!-- Variant Pixel -->
<link rel="stylesheet" type="text/css" href="node_modules/font_webatlas/font-face/webAtlas-pixel.css">

This allows you to propose several themes in your page or application, simply by interchanging these links.

Use multiple themes at the same time

The chosen theme defines the "default" theme, but you can "force" a different theme on a particular icon by adding original, sharp, outline, outline-filled or pixel class :

<!-- Displays the login icon in the default theme -->
<i class="icon download"> Download</i>

<!-- The icon is displayed in original -->
<i class="icon download original"> Download</i>

<!-- The icon is displayed in sharp -->
<i class="icon download sharp"> Download</i>

<!-- The icon is displayed in outline -->
<i class="icon download outline"> Download</i>

<!-- The icon is displayed in outline-filled -->
<i class="icon download outline-filled"> Download</i>

<!-- The icon is displayed in pixel -->
<i class="icon download pixel"> Download</i>

Combination of icons

By interlocking :

When possible, the child icon is repositioned so as to integrate with the parent icon :

<i class="icon magnify">
    <i class="icon plus"></i>
</i>

It is also possible to nest text :

<i class="icon calendar">
    <i>7</i>
</i>

By overlapping :

The combine class allows more possibilities of animation (with the use of CSS rules such as transform).

<i class="icon losange"></i>
<i class="icon combine warning"></i>  <!-- warning icon will be placed over losange icon -->