I am using UI-Grid, part of the AngularUI suite, but I want to switch out some of the glyphicons they use, in particular the arrows for sorting columns.
Everywhere else, I use Bootstrap's glyphicon-chevron-down or glyphicon-chevron-up on my custom tables. So basically I just want to override the UI-Grid sorting icons with the Bootstrap ones. Is there any way to do this? I've tried overriding the UI-grid sorting classes in my CSS but it doesn't seem to have any effect... maybe I'm doing it wrong though.
Here is what the Bootstrap classes look like:
.glyphicon-chevron-up:before {
content: "\e113";
}
.glyphicon-chevron-down:before {
content: "\e114";
}
Here is what the UI-grid classes look like:
.ui-grid-icon-sort-alt-up:before {
content: '\c360';
}
.ui-grid-icon-sort-alt-down:before {
content: '\c361';
}
So in my web-app's CSS file I did this:
.ui-grid-icon-sort-alt-up:before {
content: '\e113';
}
.ui-grid-icon-sort-alt-down:before {
content: '\e114';
}
This might be totally crazy, I have no idea how this stuff works under the hood.
Angular UI's Bootstrap addition is only reformatting the original bootstrap JS into Angular directives. It doesn't include glyphicons. If you add the fully angular-boostrap, you'll get what you are looking for.
You could also just download the glyphicons from bootstrap directly and put this code into your stylesheet or scss partial somewhere:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');
src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
You're changing the content correctly, but you are missing some additional properties that glyphicon uses, most importantly being the font-family.
Whenever the .glyphicon class is added to an element it adds the following:
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
So you will want to replicate those properties as well since your .ui-grid-icon-sort-alt-up likely does not have .glyphicon on it.
I would recommend adding something like this to your custom CSS as well:
.ui-grid-icon-sort-alt-up,
.ui-grid-icon-sort-alt-down {
position: relative;
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
/* ... */
}
To explain what is going on here, Glyphicon is using a custom font that has a bunch of icons for various Unicode characters. \e114 is a reference to a specific character in the font that they created.
You can override css based on how you arrange your <link> tags at the head of your html. For example:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/override.css" />
Moving your css after bootstrap will allow your css to "overide" bootstrap's css.
Related
My question is pretty simple, but I can't get it to work.
I understand that you can make a button with Bootstrap + Glyphicon like so:
<span class="glyphicon glyphicon-chevron-left"></span> Default text here
But, I want the content & styling seperate (as is normal, right?), because it makes editting a lot easier (just one scss file instead of 54 html files with buttons).
Can I use ::before or ::after on the button and then use "content" in scss to include a Glyphicon? If so, how?
The first idea probably is do something like this
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
.glyphicon-chevron-left;
}
}
but that compile into something like:
.my-btn:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.my-btn:before:before { /*this is wrong*/
content: "\e079";
}
And nested pseudo-elements It is not possible if I am not mistaken see this Nesting pseudo-elements inside pseudo-elements
So you have to do this:
//HTML
Default text here
//CSS
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
}
&.my-chevron-left{
.glyphicon-chevron-left;
}
}
PD: I'm using less, in SCSS is quite similar
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as ๎
\2701 renders as เช
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..
I did something like this
#font-face{
font-family:"MYFONT" !important;
src: url("/assets/MYFONT.otf") format("opentype") !important;
}
And then I added
*{
font-family:"MYFONT", sans !important;
}
It obliterated the glyphicons from Bootstrap.
How do I globally declare my font and yet keep the bootstrap glyphicon from being destroyed throughout my site?
Thanks.
The problem is *, because it sets the font-family for all elements.
The quick fix is to do it like this: body { font-family:"MYFONT", sans; }
The correct fix is to use the LESS/SASS version of bootstrap and change the variable #font-family-sans-serif to use your custom font.
http://www.wordherd.co/#features
On this site, when I try to look at the source image file of any of the icons (like "Directions") using Firebug, it displays some sort of unicode for the content.
How do you get to the source image files? I'm trying to understand the hack they are using to prevent the images from being accessible.
These "images" are icons fonts. They are usually added via :before/:after pseudo elements. In this instance, the content value is an ASCII representation of an external font library character.
.icon-flag:before {
content: "\f024";
}
In order for this to work, you would need to change the element's font-family property to reference the external font library. In your case, the font library is FontAwesome.
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
Using the Font-Awesome library, you could simply add an icon like this:
<i class="fa fa-stack-overflow"></i>
Since it's treated like font, you can increase the size of it using the CSS property font-size. (example)
.fa-stack-overflow {
font-size:30px;
color:orange;
}
I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:
#font-face
{
font-family: myFirstFont;
src: url('ellis.ttf');
}
body
{
margin: 0;
padding: 0;
width: 100%;
cursor: default;
font-size: 11px;
line-height: 1;
font-family: myFirstFont,arial,san-serif;
overflow:auto;
background:#ecf6f7;
}
I know this is not a cross browser case, but I am trying to make work a simple case at first.
add format("opentype"); after URL
apply font like this..
#font-face
{
font-family: 'ellis';
src: url('ellis.ttf');
}
.body
{
font-family: "ellis";
}
on both the font-family declarations add speech marks.
so add to both #font-face and body:
font-family: "myFirstFont";
Or alternatively try this to make sure all code is correct and to make sure its not the code:
http://www.fontsquirrel.com/fontface/generator
It also may sound stupid, but make sure all spellings of fonts and paths are correct.
Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.
If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.