font_webatlas
v2.2.0
Published
Font WebAtlas is an icon module designed for the creation of interfaces and web applications.
Downloads
35
Maintainers
Readme
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 -->