vicpra logo
Icons

Full Guide.

Step 1 :

First of all, it has to be linked on the head section of your website, for that go to the source code of your website and copy it in its head section. (COPY ANY ONE).

<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v4/v4/css/vicon.css">
<link rel="stylesheet" href="https://vicpra.com/vicpra-icons-v4/v4/css/vicon.min.css">
step 1

Step 2 :

After applying it on the head, go to the vicpra icons tab, and then search your icon. (Click on the icon to copy).

<i class="vicon vicon-amazon-fill"></i>
<i class="vicon vicon-apple-fill"></i>
step 1

Styling :

You can change size of the icon with font-size in CSS. It will inherit the font-size from the parent by default. There are fixed sizes you can add to the icon by adding classes vicon-lg,vicon-xl,vicon-xxs,vicon-xs,vicon-sm, vicon-1x,vicon-2x,vicon-3x,vicon-4x,vicon-5x,vicon-6x, vicon-7x,vicon-8x,vicon-9x,vicon-10x and vicon-fw.

Some examples are below.

<i class="vicon vicon-apple-line vicon-lg"></i>
<i class="vicon vicon-apple-line vicon-xl"></i>
<i class="vicon vicon-apple-line vicon-1x"></i>

List Icons :

Use icons as bullets for the list by adding class vicon-ul to the unordered list element and include the icons inside the li.

Some examples are below.


                    <ul class='vicon-ul'>
                    <li><i class='vicon vicon-account-circle-line'></i>List Item 1</li>
                    <li><i class='vicon vicon-add-box-fill'></i>List Item 2</li>
                    <li><i class='vicon vicon-apps-2-line'></i>List Item 3</li>
                    </ul>
  • List Item 1
  • List Item 2
  • List Item 3

Fixed Width :

You can use fixed width class vicon-fw \to get a fixed width icon next to the text li.

Some examples are below.

<i class="vicon vicon-facebook-box-fill vicon-fw"></i>Facebook
Facebook

Pulled Icons :

Use class vicon-pull-left or vicon-pull-right on icons for easy pull quotes li.

Some examples are below.

<i class="vicon-pull-left vicon vicon-double-quotes-r vicon-2x"></i>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga esse illum deserunt quos accusantium at maxime architecto corrupti consectetur sint, omnis earum! Cupiditate a voluptatem debitis officia rerum similique corrupti maiores omnis, asperiores recusandae ipsum quidem assumenda quaerat, deserunt dicta.

Rotation & Flipping :

Rotate the icons using classes vicon-rotate-90,vicon-rotate-180,and vicon-rotate-270 or Flip the icons using vicon-flip-horizontal and vicon-flip-vertical.

Some examples are below.

<i class="vicon vicon-arrow-up-line vicon-rotate-90"></i>
<i class="vicon vicon-arrow-up-line vicon-rotate-180"></i>
<i class="vicon vicon-arrow-up-line vicon-rotate-270"></i>
<i class="vicon vicon-arrow-up-line vicon-flip-horizontal"></i>
<i class="vicon vicon-arrow-up-line vicon-flip-vertical"></i>

Border :

Add border to your icons with classes vicon-border,vicon-border-circle.

Some examples are below.

<i class="vicon vicon-code-s-slash-fill vicon-border"></i>
<i class="vicon vicon-code-s-slash-fill vicon-border-circle"></i>

Animation :

Animate your icons with pre built CSS animations using classes vicon-spin,vicon-tada vicon-flashing,vicon-burst,vicon-fade-left,vicon-fade-up, vicon-fade-down and vicon-fade-rightYou can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count In CSS.

Some examples are below.

<i class="vicon vicon-aliens-fill vicon-spin"></i>
<i class="vicon vicon-blaze-line vicon-tada"></i>
<i class="vicon vicon-bubble-chart-fill vicon-flashing"></i>
<i class="vicon vicon-bug-fill vicon-burst"></i>
<i class="vicon vicon-criminal-line vicon-fade-left"></i>
<i class="vicon vicon-discord-fill vicon-fade-up"></i>
<i class="vicon vicon-drizzle-fill vicon-fade-down"></i>
<i class="vicon vicon-emotion-happy-line vicon-fade-right"></i>

Animation on Hover :

Animate your icons on hover with pre built CSS animations using classes vicon-spin-hover,vicon-tada-hover vicon-flashing-hover,vicon-burst-hover,vicon-fade-left-hover,vicon-fade-up-hover, vicon-fade-down-hover and vicon-fade-right-hoverYou can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count In CSS.

Some examples are below.

<i class="vicon vicon-aliens-fill vicon-spin-hover"></i>
<i class="vicon vicon-blaze-line vicon-tada-hover"></i>
<i class="vicon vicon-bubble-chart-fill vicon-flashing-hover"></i>
<i class="vicon vicon-bug-fill vicon-burst-hover"></i>
<i class="vicon vicon-criminal-line vicon-fade-left-hover"></i>
<i class="vicon vicon-discord-fill vicon-fade-up-hover"></i>
<i class="vicon vicon-drizzle-fill vicon-fade-down-hover"></i>
<i class="vicon vicon-emotion-happy-line vicon-fade-right-hover"></i>

Feedback :

You can give us feedback if there is any problem in the icon Contact Here