https://github.com/Typogram/Anicons
Anicons: a new kind of icon fonts with baked-in animation and colors
https://github.com/Typogram/Anicons
icons materialdesign variablefonts
Last synced: 10 months ago
JSON representation
Anicons: a new kind of icon fonts with baked-in animation and colors
- Host: GitHub
- URL: https://github.com/Typogram/Anicons
- Owner: Typogram
- Created: 2019-08-05T15:51:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-06-17T03:55:04.000Z (almost 4 years ago)
- Last Synced: 2024-11-16T16:37:14.985Z (over 1 year ago)
- Topics: icons, materialdesign, variablefonts
- Language: CSS
- Homepage: https://typogram.github.io/Anicons/
- Size: 13.6 MB
- Stars: 154
- Watchers: 6
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Anicons
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.
## Icons
- menu
- play
- favorite
- thumb_up
- check
- notifications
- edit
- lock
- phone
- search
- location
## Use Anicons in your design projects
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
## Use Anicons on the Web
##### 1. Embed Font
To embed Anicons fonts into a webpage, copy this code into the of your HTML document.
Use the following HTML to embed Anicons Regular:
```
```
Use the following HTML to embed Anicons Color:
```
```
Use the following HTML to embed Anicons Regular and Anicons Color:
```
```
##### 2. Specify Icon Character in HTML
Use the following HTML to specify the icon character:
```
A
```
##### 3. 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;
```
##### 4. Animate
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;
}
```
## Reference
https://www.harbortype.com/blog/rocher-color-making-a-variable-color-font/
https://glyphsapp.com/tutorials/creating-a-variable-font