Links
Use Anicons on Web
- Embed Font
To embed Anicons fonts for production, you can self host the Anicons Webfont Kit on your server. To quickly try Anicons fonts out on a webpage, copy this code into the of your HTML document.
Use the following HTML to embed Anicons Regular:
<link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons-regular.css" rel="stylesheet">
Use the following HTML to embed Anicons Color:
<link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons-color.css" rel="stylesheet">
Use the following HTML to embed Anicons Regular and Anicons Color:
<link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons.css" rel="stylesheet">
- Specify Icon Character in HTML Use the following HTML to specify the icon character:
<!-- replace “A” with appropriate character. -->
<div class=”icon”>A</div>
- Specify Font Family in CSS Use the following CSS rules to specify the families:
font-family: "Anicons Regular", sans-serif;
font-family: "Anicons Color", sans-serif;
- Animate Use the following CSS rules to animate the icon:
.icon {
font-variation-settings: "TIME" 1;
transition: font-variation-settings 0.4s ease;
}
.icon:hover {
font-variation-settings: "TIME" 100;
}
Or use @keyframes animation:
@keyframes icon-animation {
0% { font-variation-settings: "TIME" 1; }
100% { font-variation-settings: "TIME" 100; }
}
.icon {
animation: icon-animation .5s ease-in-out infinite;
}