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 fontcustomSteps to create font icons
- copy all the svg file in a single directory.
- execute
fontcustom config /path/to/vectors
. It will Generate .yml file - execute
fontcustom compile /path/to/vectors
. It Generateapp
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
Sass/Compass - Convert Hex, Rgb, or Named Color to Rgba
Bootstrap 3 - 100% Height of Custom Div Inside Column
Creating a Diagonal Line/Section/Border with CSS
Width and Height Doesn't Seem to Work on :Before Pseudo-Element
Ie Alternative to Column-Count & Column-Gap
How to Remove the Hash from Compass's Generated Sprite Image Filenames
How to Create a CSS Only (Vertical) Drop-Down Menu
How to Use Chrome Web Inspector to View Hover Code
Use Nth-Child Value as a SASS Variable
CSS Spec: Block-Level Box, Block Container Box and Block Box
How to Show the First N Elements of a Block and Hide the Others in CSS
How to Generate a Box-Shadow That Follows the Shape of a Clip-Path Polygon
CSS Selector for Selecting an Element That Comes Before Another Element
Media Query for Devices Supporting Hover
Bootstrap Carousel Resizing Image