Bootstrap css uses the halflings from Glyphicons.
If I purchased their full product line, how would I incorporate that into the bootstrap framework?
Use this CSS sprite generator, uploading the zip file. It will create the relevant CSS classes for you (names are taken from images itself), merging all images in one (transparent) PNG one.
You could also use the Font Awesome solution.
Scalable vector graphics means icons look awesome at any size.
Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.
You would have to recalculate the background positioning of every glyph icon into your own class or overwrite the classes already set by the bootstrap in order to work them in. Twitter's bootstrap uses the halfling (free) version of the icons which are 14px all around, the full set is double the size so the old background-position's won't work.
Here is an example of what one of the bootstraps icon classes looks like:
/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
background-position: -216px -72px;
}
/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
line-height: 14px;
vertical-align: text-top;
width: 14px;
}
I have also created one on Github. Didn't see Marco's post above until after.
https://github.com/ekryski/bootstrap-template
From what I recall, Glyphicons doesn't provide their icons as a sprite version (many icons as one image), instead you get each icon separately. If you only plan on using a couple of their icons, this should be ok.
The best way would be to create a separate css file and continue on with their ".icon-" naming convention.
.icon-whatever {
background:url('..img/someicon.png') 0 0;
}
The default background position is 14px 14px so you need to reset it to 0 0 like I did above.
I've created a sprite and CSS drop-in for Bootstrap to provide this functionality. The repo and instructions are on Github. Not every icon has coverage yet, and some are still slightly off-center. To use the bigger icons just add the icon-large CSS class:
<i class="icon-large icon-search"></i>
There is a great article about Bootstrap Icons here: http://www.themplio.com/twitter-bootstrap-icons
No need to incorporate it. You can just add the glyphicons and use it alongside with the halflings bootstrap comes with.
Add the glyphicons (regular set) as follows:
/css/glyphicons.css
/fonts/glyphicons-regular.eot
/fonts/glyphicons-regular.svg
/fonts/glyphicons-regular.ttf
/fonts/glyphicons-regular.woff
/fonts/glyphicons-regular.woff2
You propably should give the base-css-class: .glyphicons the same style as bootstraps .glyphicon
.glyphicons {
position:relative;
top:2px;
display:inline-block;
font-family:'Glyphicons Regular';
font-style:normal;
font-weight:normal;
line-height:1;
vertical-align:top;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
Next, add the reference to the glyphicons into your page as follows:
<link href="/css/glyphicons.css" rel="stylesheet" />
Now, use the complete 'regular' glyphicons alongside with the halflings:
<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>
<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>
The other answers are fine but keep in mind the difference between icons with the font-technique and the older technique when using sprite-png's. Png's are not always scaleable and therefore comes with several sizes. Also, the color can not be set. To contrast with the background, the .white class can be used on png's to switch from black to white. By using fonts, style the icons as you would style a font:
.iconstyle { color: blue; font-size: 26px; etc.. }
You could use my soluce. Put this line after bootstrap link url css on your header.
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">
Then to call online html code
<i class="icon-close icon-red"></i> Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i> Someting <!-- 32x32pix size color red -->
You could download here the assets (images-icons png and css both in zip) :
http://www.photonautes-associes.fr/utils/assets.zip
enjoy :)
Download fonts from official bootstrap page and then paste this code as is in your CSS file
Try This code
#font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}
I thought I'd add my experience to the list here.
There were several obstacles for me when trying to add Glyphicons All to my existing, labyrinthine, Bootstrap-riddled codebase. (Among them, Glyphicons All uses the construction ".glyphicons .glyphicons-[name]" and Bootstrap uses the construction ".glyphicon .glyphicon-[name]").
I ultimately decided to just use them both, in parallel. Going forward, I find I'm using the Glyphicons All construction more and more, but the Bootstrap construction still works for all of my existing code.
Yes, including both "fonts" adds to the overall page weight, but not disastrously.
What I did was pretty simple and worked perfectly. NOTE: this is if you want those beautiful glyphicons working as fonts, as the bootstrap version I'm using does.
In the glyphicons zip, copy all the fonts in /glyphicons/web/bootstrap_example/fonts to where your bootstrap fonts are currently in your project
In the glyphicons zip, look at /web/bootstrap_example/css/glyphicons.css, copy and paste all into your own less/css file.
This step may be unnecessary as long as your own css/less file overwrites them properly: In your project's bootstrap.css file, remove #font-face stuff, .glyphicon styles, and all the glyphicon individual content tags (i.e, .glyphicon-xxxx:before { content: ... }).
In your less/css file with all the new tags, do a find and replace
".glyphicons-" replace with ".glyphicon-"
That should be it, unless I'm forgetting something simple. Works great for me.
Use glyphicons classess, example:
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
My favourite icon fonts is Fontello, you can download icons you need instead of whole package.
Related
I've got a stackblitz Angular 5 app for implementing table sorting here - https://stackblitz.com/edit/angular-rxdzom. It's based on the code from http://www.carbonatethis.com/sort-table-columns-with-angular-and-typescript/. It uses an ./app/sortable-table/sortable-column.component.css with the contents:
.caret-up:before {
content: "\f0d8";
}
.caret-down:before {
content: "\f0d7";
}
and an ./app/sortable-table/sortable-column.component.html that contains two i tags that reference these with the class attribute. Instead of showing the caret-up and caret-down, it substitutes a rectangular box. If I replace caret-up and caret-down with the Font Awesome library, "fa fa-caret-up" and "fa fa-caret-down", it works properly. My environment at work doesn't use Font Awesome and it's not an option to add it, so I need to create the css content manually as I'm attempting above. Any help is appreciated!
I've tried researching this on my own, and clearly have something that looks like it should work, it just doesn't. I've used references like http://webdesignerwall.com/tutorials/how-to-add-icon-fonts-to-any-element-with-css that seem to indicate the css is valid, and I've tried using ".caret-up i::before" which also does not work. I'm clearly missing something or doing something wrong. I even tried adding
padding-right: 10px;
font-family: "FontAwesome";
before the content property but that didn't help either.
I assume the css shown above is in your styles property of your component? If so, the issue is that the backspace needs to be escaped in your string. Update them to the following and you should be good!
.caret-up:before {
content: "\\f0d8";
}
.caret-down:before {
content: "\\f0d7";
}
An alternative for adding icons is through material icons
You can find the icons here : https://material.io/icons/
Include the following link in your index.html
And in the css add the class 'material-icons' to your property.
For example-
keyboard_arrow_up
You can refer to different symbols name on the above material icons link provided.
Okay, so a part of this was me being in the dark about our environment. We had updated font awesome to Semantic UI, which uses a port of the font awesome fonts so I just had to use those fonts. To do it manually, I could use:
.caret-up:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d8";
}
.caret-down:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d7";
}
and to put the icons after the text, I just needed to move the "ng-content" tag above the "i" tags for asc/desc sort order. So, using the Semantic UI fonts, my sortable-column.component.html became:
<ng-content></ng-content>
<i class="caret up icon" *ngIf="sortDirection === 'asc'"></i>
<i class="caret down icon" *ngIf="sortDirection === 'desc'"></i>
And it worked great. I forked my Stackblitz app at https://stackblitz.com/edit/angular-nfwe6j to show how this was accomplished in my environment using the Semantic UI 2.3.1 of the font awesome fonts.
Recently I decided to switch to SVG icons from font icons. I used Illustrator to draw my SVGs and I exported the artboards (containing an individual icon) with the following settings:
Styling: Inline Style
Font: SVG
Images: Embed
Object IDs: Layer Names
Decimal: 2
I used the Icomoon app to generate the SVG icons. The problem though is, all the SVGs have a fill, stroke or style property inline everywhere. I can’t update the icon color with CSS while those styles are there in the SVG.
Am I missing something? Is there an option in Illustrator to save the SVG’s without the fill / stroke / styles properties? Or do I have to use something like Remove SVG Properties to remove the properties?
If Remove SVG Properties is the way to go, can someone tell me how to use it in my Angular CLI project? I’m very new to this.
Yes, you can.
Just select the svg in CSS then apply:
selector {
fill: red;
stroke: blue;
/* etc */
}
It seems to work fine for me.
Optionally, add !important if needed.
Another thing you can do to update inline CSS is by jQuery, using .css() method.
One way to use free icons from that place is (link):
.lnr-home {
color: red;
font-size: 40px;
/* To get crisp results, use sizes that are
a multiple of 20; because Linearicons was
designed on a 20 by 20 grid. */
}
body {
font-size: 40px;
font-family: sans-serif;
color: #red;
}
<!-- Add the following <link> to the <head> of your HTML. -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!-- To insert the icon: -->
<span class="lnr lnr-home"></span> lnr-home
<!--
Cheat Sheet:
https://linearicons.com/free#cheatsheet
-->
You can use online tool
this is automatically convert inline style.
use this android developer
http://inloop.github.io/svg2android/
I'm using a custom template and don't know where the certain definition is.
It is a cart image and I want to replace the image with some other, so I need to find it. I only have found this bit:
.fa-shopping-cart:before{content:"\f07a"}
.fa-shopping-cart:before{content:"\f07a"
is a code part to say before the applying of your class you will have the icon identify by the code "\f07a".
You can find other one by following the link : https://astronautweb.co/snippet/font-awesome/
you can also set your on image by changing the code above yb something seems:
content: url('yourimgpath');
Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more.
Whilst the implementation in Bootstrap is designed to be used with the <i> element (Bootstrap v2), you may find yourself wanting to use these icons on other elements. To do so, you'll need to use the following CSS on the desired element, and then substitute in the content value for the relevant icon
and was able to find substitute.It includes following icons such as:
Web Application Icons
Accessibility Icons
Hand Icons
Transportation Icons
Text Editor Icons
Brand Icons
All these icons,and much more can be used just by using class.
Font Awesome does not use images for icons and an img element without a src attribute is invalid HTML.
What you can do is add logic to show or hide the dummy icon beside the image. Here is an example using a class on a parent wrapper:
<div className="show-icon">
<i className="fa fa-..."></i>
<img src="..." />
</div>
When the parent div element has a class of .show-icon, you can use CSS to show the icon and hide the image:
div i.fa { display: none; }
div img { display: block; }
div.show-icon i.fa { display: inline-block; }
div.show-icon img { display: none; }
I'm trying to use font icons with the zurb foundation icon pack and while of course you can display them inline via of course something as simple as;
<i class="fi-alert"></i>
Except when I try to use it as css content (which is how they display them...) I don't get the same result when I do something like content: "\f101" inside of a css class. I just get those squares to display.
Is the only difference that I include them externally? via;
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">
Or what? Am I just missing a src ref in my sass or something inane like that? I'm doing it just how I would expect it to work and have done with others in the past but I get no icon using them from the css, only shown inline with the html? I know it's going to be some dumb oversight so could use another pair of eyes.
Sorry, kicking the dust off my web experience, it's been awhile.
You need to set the font-family to the icon font in the same class where you set the content.
.icon:after{
font-family: "foundation-icons";
content: "\f101";
}
To use them in a css selector like that you have to actually install the font-family for your page and declare that font-family in your css selector before using the code.
This is a decent tutorial https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
Please provide an example of code that works and doesn't work for you.
If you are trying to display icon by adding :content to an existing css element that is not part of icon pack, this will not work. For example this WILL NOT WORK:
HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}
Use 'i' tag to add icons:
HTML: <li class="icon"><i class="fi-alert"></i>text </li>
Every time you see squares you need to check if font files are loaded. There are 4 fonts are used by icon set in case you want to load css on your server and link them manually:
/foundation-icons.eot
/foundation-icons.woff
/foundation-icons.ttf
/foundation-icons.svg
Ill start with what I've done thus far:
Re-downloaded fonts
switched to CDN for bootstrap css
declared font in custom css file that i use for all my styling
If i use the traditional span that works e.g
<span class="glyphicon glyphicon-ok"></span>
I can also see the like default icon the browser puts there
Code:
.box-cont li:before {
content:"\e013";
}
my website is ukhotspot.co.uk it is obvious what's going on hopefully
Your have to add the font-family to the selector:
.box-cont li::before {
content: "\e013";
font-family: "Glyphicons Halflings";
}
If you don't do this, the browser try to use a fallback font and there is no custom icon.
You can also add the class .glyphicon to every element but the first one should be the simpelst solution.