typogram / anicons Goto Github PK

Anicons: a new kind of icon fonts with baked-in animation and colors

Home Page: https://typogram.github.io/Anicons/

CSS 100.00%

anicons's Introduction

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:

<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">

2. Specify Icon Character in HTML

Use the following HTML to specify the icon character:

<!-- replace “A” with appropriate character.--> 
<div class=”icon”>A</div>

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

anicons's People

Contributors

Stargazers

Watchers

Forkers

davelab6 rememberlenny bghryct username1290 rwprodev azzazkhan alexisabena vfa-tanna betoalanis

anicons's Issues

Download button Zip to include webfonts kit as subdirectory

Include OFL.txt in all ZIPs

An important detail :)

Cannot get the font to animate at all

I've attempted to run the code on my website a few times. While the font functions, the time axis does not ever pass 1.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons-regular.css" rel="stylesheet">
         <link rel="stylesheet" href="variablefonts.css">
  </head>
  <body>
    <style>
    test{
      font-family: "Anicons Regular", sans-serif;
}
@keyframes icon-animation {
     0% { font-variation-settings: "TIME" 1; }
   100% { font-variation-settings: "TIME" 100; }
}
.icon {
   animation: icon-animation .5s ease-in-out infinite;
}
    </style>
    <!-- replace “A” with appropriate character.--> 
    <test class=”icon”>A</test>A
  </body>
</html>

The code above is concatenated from the snippets on the use page. Am I misinterpreting something, or does Google Chrome not support variable fonts yet?

Check fonts with fontbakery's Google Fonts profile

The TTF files should all be checked with fontbakery's googlefonts profile and any FAIL results resolved :)

Also, check that the correct copyright notice in #4 is used in the font files.

How does one change the color?

I'm not terribly clear on how to change the color of the color font? Does it involve re-compiling these with the brand colors, or is there some parameter that can be specified via CSS that can override the color?

Add LICENSE, AUTHORS, CONTRIBUTORS files

Filing an issue for me to add these via PR :)

Use in design apps info

Move this from bottom of About page to Use page, SeHee can discuss :)

"Use" page font tester elements have broken layout in Firefox

Seems to be fixable by adding overflow-wrap: break-word; to the element (from 5 seconds of looking, this style seems to be a default style in Chrome, but not Firefox).

Anicons demo website is broken in Safari

The animated icons on the demo site move around during animation in Safari 14.1.1, every icon on the page is affected

CleanShot.2021-08-19.at.10.16.35.mp4

The icons on this page are fine however: https://typogram.github.io/Anicons/use.html

Scroll issue on Chrome

First: awesome project and website! Love the use of Recursive, too. :)

Problem

When I try to scroll to certain slides/sections of the homepage, it very briefly pauses but keeps moving before I can read or interact with that section, without me scrolling again.

It feels like my scroll action is being recorded as multiple actions, then triggering multiple animated scrolls. Maybe this is something a JS debouncing technique could help solve?

Environment

macOS 10.15.3 (Catalina)
Chrome Version 80.0.3987.122 (currently the latest official build)

Extra context

In Firefox & Safari it's fine – I'm only encourtering this on Chrome.

Strangely, if I have dev tools open specifically to the Console, I don't experience the issue.

I can also avoid the issue if I only use my keyboard arrows to navigate.