├── README.md
├── install
├── OFL.txt
├── static fonts
│ ├── AniconsColorStatic-Layer0End.ttf
│ ├── AniconsColorStatic-Layer0Start.ttf
│ ├── AniconsColorStatic-Layer1End.ttf
│ ├── AniconsColorStatic-Layer1Start.ttf
│ ├── AniconsStatic-End.ttf
│ └── AniconsStatic-Start.ttf
└── variable fonts
│ ├── AniconsColorGX.ttf
│ └── AniconsGX.ttf
├── source
├── static fonts
│ ├── Anicons Color Static- Layer 0 End.glyphs
│ ├── Anicons Color Static- Layer 0 Start.glyphs
│ ├── Anicons Color Static- Layer 1 End.glyphs
│ ├── Anicons Color Static- Layer 1 Start.glyphs
│ ├── Anicons Static-End.glyphs
│ └── Anicons Static-Start.glyphs
└── variable fonts
│ ├── Anicons Color.glyphs
│ └── Anicons Regular.glyphs
└── webfonts
├── AniconsColorGX.ttf
├── AniconsGX.ttf
├── anicons-color.css
├── anicons-regular.css
└── anicons.css
/README.md:
--------------------------------------------------------------------------------
1 | # Anicons
2 |
3 | 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.
4 |
5 | ## Icons
6 | - menu
7 | - play
8 | - favorite
9 | - thumb_up
10 | - check
11 | - notifications
12 | - edit
13 | - lock
14 | - phone
15 | - search
16 | - location
17 |
18 | ## Use Anicons in your design projects
19 | 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.
20 |
21 | A
55 | ```
56 | ##### 3. Specify Font Family in CSS
57 |
58 | Use the following CSS rules to specify the families:
59 | ```
60 | font-family: "Anicons Regular", sans-serif;
61 | font-family: "Anicons Color", sans-serif;
62 | ```
63 | ##### 4. Animate
64 | 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.
65 | ```
66 | .icon {
67 | font-variation-settings: "TIME" 1;
68 | transition: font-variation-settings 0.4s ease;
69 | }
70 | .icon:hover {
71 | font-variation-settings: "TIME" 100;
72 | }
73 | ```
74 | or use @keyframes animation:
75 | ```
76 | @keyframes icon-animation {
77 | 0% { font-variation-settings: "TIME" 1; }
78 | 100% { font-variation-settings: "TIME" 100; }
79 | }
80 | .icon {
81 | animation: icon-animation .5s ease-in-out infinite;
82 | }
83 | ```
84 | ## Reference
85 | https://www.harbortype.com/blog/rocher-color-making-a-variable-color-font/
86 | 
