Examples how can use Amazing Neo
Basic Integration
-
Reference the CSS inside your head tag
<link href="amazing-neo-1.0.0/css/amazing-neo.css" rel="stylesheet">
-
Define the icon with the specified classname
<i class="an an-anchor"></i>
You are able to change icon size with default calacess
an-1x
an-2x
an-3x
an-4x
an-5x
an-6x
an-7x
an-8x
an-9x
an-10x
an-11x
an-12x
an-13x
an-14x
an-15x
<i class="an an-brain an-2x"></i>
<i class="an an-brain an-3x"></i>
<i class="an an-brain an-4x"></i>
<i class="an an-brain an-5x"></i>
<i class="an an-brain an-6x"></i>
Animated Icons
an-spin
<i class="an an-class an-spin"></i>
Animation Example two
an-shrink
<i class="an an-class an-shrink"></i>
Rotated Icons
an-rotate-90
an-rotate-180
an-rotate-270
<i class="an an-class an-rotate-90"></i>
an-flip-horizonta
an-flip-vertical
<i class="an an-class an-flip-vertical"></i>
strocke Icons
an-strocke-1x
an-strocke-2x
<i class="an an-class an-stroke-1x"></i>
List with Icons
Replace default bullets easily with an-ul & an-li
an-ul
an-li
- List row one
- List row two
- List row three
- List row four
- List row five
- List row six
<ul class="an-ul">
<li>
<i class="an-li an an-bullet"></i> List row one
</li>
<li>
<i class="an-li an an-bullet"></i> List row two
</li>
<li>
<i class="an-li an an-bullet"></i> List row three
</li>
<li>
<i class="an-li an an-bullet-diamond"></i> List row four
</li>
<li>
<i class="an-li an an-bullet-diamond"></i> List row five
</li>
<li>
<i class="an-li an an-bullet-diamond"></i> List row six
</li>
</ul>
CSS
Currently content code update support not available
Define the icon with content
content: '\66';
font-family: 'amazingneo';