custom-bs-icons

Custom bootstrap icons

by shyamh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<h2>Custom icons with bootstrap</h2>
<div class="iconrow">
    <i class="glyphicon glyphicon-search"></i> a standard bootstrap icon
</div>
<div class="iconrow">
    <i class="icon-dashboard-intheoffice"></i> <div class="iconlabel">a custom icon, using our own sprite file.</div>
</div>
<div class="iconrow">
    <p>These are designed so that we can include them in HTML using the same bootstrap syntax. Note that the icon sprite file URL and size are different from the bootstrap icons.</p>
</div>
<div class="iconrow">
    The logo, an even bigger sprite icon<br />
    <i class="icon-dashboard-logo"></i>
</div>
<div class="iconrow">
    <button type="submit" class="btn btn-default">
        <i class="icon-dashboard-edit"></i><div class="iconlabel">Edit</div>
    </button>
    <div>
        <br />
        A button with an icon (need properly sized icons for this to look nice, but you get the point.
    </div>
</div>

<div class="iconrow">
<a href="http://www.10000ft.com" target="new">icon sprites (c) www.10000ft.com</a>
</div>

CSS

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

BODY {
    margin: 40px;
}

.iconrow {
    margin-top: 10px;
}

.iconlabel {
    display: inline;
    position: relative;
    top: 7px;
    margin-left: 10px;
    vertical-align: top;
}

/* custom icons
   copy the styles below into icons-dashboard-sprites.css */

[class^="icon-dashboard-"],
[class*=" icon-dashboard-"] {
    background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png");
    background-repeat: no-repeat;
    display: inline-block;
}

.icon-dashboard-logo { background-position : -550px -690px; width : 120px; height : 120px;  }
.icon-dashboard-intheoffice { background-position: -395px -60px; width: 24px; height: 24px  } 
.icon-dashboard-edit { background-position: -765px -200px; width: 24px; height: 29px  }