Anicons is the first animated color variable icon font. It is made with two types of technologies: Variable Fonts and Color Fonts. We want to experiment with creating an icon font that combines these two cutting edge font technologies.
- menu
- play
- favorite
- thumb_up
- check
- notifications
- edit
- lock
- phone
- search
- location
You can easily incorporate Anicons into your design projects by installing it onto your machine. When you download the Anicons project files, it comes with static versions of the icon font with two weights: Start and End. The static versions help you plan how you will Anicons in your project.
Start shows the icon at the starting stage of the animation
End shows the icon at the ending stage of the animation
To embed Anicons fonts into a webpage, copy this code into the of your HTML document.
Use the following HTML to embed Anicons Regular:
<link href="https://fonts.googleapis.com/css?family=Anicons+Regular&display=swap" rel="stylesheet">
Use the following HTML to embed Anicons Color:
<link href="https://fonts.googleapis.com/css?family=Anicons+Color&display=swap" rel="stylesheet">
Use the following HTML to embed Anicons Regular and Anicons Color:
<link href="https://fonts.googleapis.com/css?family=Anicons+Regular|Anicons+Color&display=swap" rel="stylesheet">
Use the following HTML to specify the icon character:
<!-- replace “A” with appropriate character.-->
<div class=”icon”>A</div>
Use the following CSS rules to specify the families:
font-family: "Anicons Regular", sans-serif;
font-family: "Anicons Color", sans-serif;
Use the following CSS rules to animate the icon. font-variation-settings
provides control over the variable font characteristics, (in our case, time) of our icon font.
.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;
}
https://www.harbortype.com/blog/rocher-color-making-a-variable-color-font/
https://glyphsapp.com/tutorials/creating-a-variable-font