Skip to content
/ tricons Public

Common icons—customizable via LESS—that morph from one to another with CSS transition; inspired by (but not using) SVG animated icons.

Notifications You must be signed in to change notification settings

kevnk/tricons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tricons

Common icons—customizable via LESS—that morph from one to another with CSS transition; inspired by (but not using) SVG animated icons.

Usage

TL;DR; for a full example, view src/index.html and src/styles/less/styles.less

1. Bower install

$ bower install -S tricons

2. Import the tricons mixin

@import 'bower_components/tricons/tricons';

// Optionally set the default tricon
// NOTE: if you change default-tricon, be sure to add/remove it from the list of @tricons below
@default-tricon: hamburger-menu;

// Optionally remove unused icons from this list to slim down on your CSS
@tricons: hamburger-menu, x, arrow-left, arrow-right, arrow-up, arrow-down, plus, minus, loading, caret-up, caret-down, caret-left, caret-right, heart;

// Optionally customize tricons default values
@tricon-thickness: 2px;
@tricon-min-width: 40px;
@tricon-height: 40px;
@tricon-pad-vert: 0;
@tricon-pad-horz: 0;
@tricon-color: #fff;
@tricon-color-hover: #fff;
@tricon-bg-color: #2A97EF;
@tricon-bg-color-hover: saturate(lighten(#2A97EF, 5%), 5%);

3. Create some customized tricon buttons with your less

.my-custom-tricon {
    @thickness: 1px; 
    @min-width: 60px; 
    @height: 60px; 
    @pad-vert: 10px; 
    @pad-horz: 20px; 
    @color: #fff; 
    @color-hover: #fff; 
    @bg-color: #FEEA3A; 
    @bg-color-hover: saturate(lighten(#FEEA3A, 5%), 5%);
    .tricon(@thickness, @min-width, @height, @pad-vert, @pad-horz, @color, @color-hover, @bg-color, @bg-color-hover);
}

4. HTML Markup

<a class="my-custom-tricon" href="#" data-tricon="hamburger-menu" data-tricon-toggle="x">
    <span></span>
    <span></span>
    <span></span>
</a>
<a class="my-custom-tricon" href="#" data-tricon="arrow-left">
    <span></span>
    <span></span>
    <span></span>
    <span>Text right of icon</span>
</a>

NOTE: if you want the text on the left of the icon, just move that element before the 3 empty spans

5. Javascript to toggle data-tricon attribute

Use the following or roll your own:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/tricons/dist/tricons.js"></script>

About

Common icons—customizable via LESS—that morph from one to another with CSS transition; inspired by (but not using) SVG animated icons.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published