Bigoo

It's so FLUFFY

Because it's a font, you can change colors and size the way you want / need / love :

Main Color

Second Color

Size

Reset colors and size

I NEED IT

Well, to use it in your project :

Download the file
Unzip where you want in your project
Link the css to your project : <link rel="stylesheet" type="text/css" href="yourPathToTheFile/bigoo/bigoo.min.css">
Chose the two colors you want and add them in your own CSS using CSS Variables (CSS Variables Support table ) :root {
--bigoo-main-color: ;
--bigoo-second-color: ;
} Make sure that this declaration is made BEFORE the bigoo.min.css import.

If you prefer to use SASS Variables:
Download the SASS version and set the two colors you want in your SCSS vars definitions $bigoo-main-color: ;
$bigoo-second-color: ;
Make sure that the var initialization is made BEFORE the bigoo.min.scss import and to preprocess it with all your other stylesheets.

If you dont want to use variables at all:
Just edit the bigoo.min.css file with your 2 colors: .bigoo:before{color:}
.bigoo:after{color:}
Use it in your project. You need the general class "bigoo" and the specific icon class. Exemple: <i class="bigoo bigoo-arrow-circle-left"></i> You can use it directly on existing tags with text inside. <h1 class="bigoo bigoo-arrow-circle-left">Big Title Here</h1> But be aware that the line-height property is set to 0.
I would recommand to use a specific <i>, <span> or <div> tag.

Hooks

The Bigoo CSS is !important free and single class only so you can easily overide any style from your own CSS. Here are some exemples:

If you need spécific color on only one icon: .bigoo-cross::before {
color:darkred;
}
.bigoo-cross::after {
color:red;
} If you need animation: .bigoo-battery-1::before {
color:red;
animation-name: lowbattery;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes lowbattery {
0% {opacity: 1;}
49% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}
.bigoo-battery-1::after {
color:#ddd;
} If you need hover effect: .hooks .bigoo-rafters-up::after {
transform: translateY(0);
transition: transform 200ms;
}
.hooks .bigoo-rafters-up:hover::after {
transform: translateY(-14px);
} Do what you want, and show me!

It's so FLUFFY

I NEED IT

Hooks

Anything else ?