Examples how can use Amazing Neo

Basic Integration

  1. Reference the CSS inside your head tag

    <link href="amazing-neo-1.0.0/css/amazing-neo.css" rel="stylesheet">
  2. 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';