[Vuejs]-Creating an animated search icon

by

0👍

I don’t know the answer for the animation but if you want to add font awesome icon you can add its link to the main template file for the vuejs . just copy paste you link to the head section in there and use the <i>search icon</i> in the vue code.

0👍

Replacing background by a font-awesome icon

You could use :after or :before property in CSS :

It will allow you to display content, linked to your input (like a font-awesome glyphicon for example) :

input {
   position: relative;
}
input:after {
   content: '\f002';
   position: absolute;
   right: 10px;
   top: 5px;
}

In this case, the font-awesome icon is : \f002 :

Animate from the right

If you use :after property and the position is absolute to your input (with a right CSS property), it should open from the right.

Leave a comment