Closed getdave closed 10 years ago
Note that not all icons are designed to a 16px, 32px, 64px grid. Therefore we need alternative icon sizing classes to account for 20px,40px,60px scales.
// ========================================================================== // SIZING MODIFIERS // ========================================================================== .icon--small { font-size:16px; } .icon--large { font-size:32px; } .icon--huge { font-size:64px; } .icon--natural { font-size:inherit; } .icon--small-alt { font-size: 20px; } .icon--large-alt { font-size: 40px; } .icon--huge-alt { font-size: 60px; }
We also need to add positioning modifiers
// ========================================================================== // POSITIONING // ========================================================================== // INLINE // creates valigned icon with an appropriate RHS margin to push text away. // ========================================================================== .icon--inline { @include inline-block; vertical-align: text-bottom; margin-right: 0.2em; }
Done.
https://github.com/getdave/Tanlinell/commit/acb6102f67547d58461390ff2f8758ceef574751
Closing
Note that not all icons are designed to a 16px, 32px, 64px grid. Therefore we need alternative icon sizing classes to account for 20px,40px,60px scales.
We also need to add positioning modifiers