How to Add Custom Icon in Twitter Bootstrap

How to add custom icon in Twitter Bootstrap?

You can create your own icon by defining it in your own class like s:

.icon-car {
background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
background-position: center center;
}

Keeping in mind of course to use the prefix .icon-* since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).

Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-height of your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/

Custom icon twitter bootstrap

I haven't made one in bootstrap in a while, but it looks like the syntax might be a bit different now than it was when that post was made. This is how you generally would use an icon font with an element (or rather, a pseudo-element) with ANY icon font.

/* this just imports the font */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
.icon-linkedin:before {
font-family: 'FontAwesome', sans-serif;
content: "\f0e1";

}

DEMO

Twitter bootstrap 3 - create a custom glyphicon and add to glyphicon font

This process might be one option.

You could use the IcoMoon App. Their library includes FontAwesome which would get you off to a quick start, or you download glyphicon, and upload the fontawesome-webfont.svg

For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set.

When you are finished export the font set and load it as you would any icon font.

Good luck!

UPDATE

If your imported SVG file icons seem misaligned after importing into the iconmoom.app, first check how they actually look when used on a web page. It seems to me that the preview may not always be perfect. Alternatively, there is an edit icon in the iconmoon.app tool bar which lets you move and resize.

Place custom icon inside bootstrap button

First of all your <i> element doesn't have a height and width property.

But adding height and width alone wouldn't do what you want because <i> is an inline element so you want to add another property as well i-e. display: inline-block
Then the last thing to make it perfect would be to add background-size: cover (to adjust icon exactly into its container element)

.icon-play{
background-image : url(../img/Clock-Play.png);
background-size: cover;
display: inline-block;
height: 15px;
width: 15px;
}

How to create custom font icons?

Fontcustom will help to generate custom icon webfonts from the comfort of the command line. Your icons should be in svg format.

  • Installation:

    sudo apt-get install fontforge wget
    http://people.mozilla.com/~jkew/woff/woff-code-latest.zip
    unzip woff-code-latest.zip -d sfnt2woff
    cd sfnt2woff
    make sudo mv sfnt2woff /usr/local/bin/
    gem install fontcustom

  • Steps to create font icons

    1. copy all the svg file in a single directory.
    2. execute fontcustom config /path/to/vectors . It will Generate .yml file
    3. execute fontcustom compile /path/to/vectors. It Generate app directory with font and stylesheet.

Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

Achieving the same result and experience as Glyphicon or any other icon font using an image is quite hard, almost impossible.

The advantage of having a font is that you can easily manipulate the icon itself, just like you're styling the text in an element. Size, color, anything you can add to a text, you can add it on the icon too!

But if you want to use images instead of font, you're limited. You set the icon and then probably add few classes that you can use to manipulate the size of the icon. About the color of the icon, I'm not aware of any other way except for having two or more icons with different color.

Here's an example CSS:

.your-icon {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: normal;
line-height: 1;
float: left;
display: block; /* This is required */
}

.your-icon.icon-home {
background: url(http://www.clipartbest.com/cliparts/9Tz/Ez9/9TzEz9pLc.png);
background-size: cover;
}

.your-icon.normal {
width: 32px;
height: 32px;
}

.your-icon.small {
width: 16px;
height: 16px;
}

.your-icon.medium {
width: 64px;
height: 64px;
}

.your-icon.large {
width: 128px;
height: 128px;
}

And the HTML:

<ul class="nav nav-pills nav-stacked custom-nav-pills">
<li><a href="#"><span class="your-icon icon-home small"></span> Home</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a>
</li>
</ul>

Demo: http://jsfiddle.net/q7wxwgod/

Or you can choose a different icon font with icons which you might like more. Here's a list of some:

  • Font Awesome (I use it almost every time)
  • Foundation Icon Font
  • Icon Font - IconMoon

Or you can find tools on the internet which will convert your icons to a font: http://fontello.com/

Bootstrap add custom icons to glyphicon for bootstrap-select

Are you typing the correct name of your icon? Each library of icons has their own naming convention, so if you create custom ones they will have a unique name.

The home icon for these three libraries:

font-awesome:fa fa-home

bootstrap: glyphicon glyphicon-home

icomoon: icon-home

Twitter-bootstrap custom icon position not work

try adding

 display: inline-block;

to your class for image

Add icon to submit button in twitter bootstrap 2

You can use a button tag instead of input

<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Sign in
</button>


Related Topics



Leave a reply



Submit