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.
Related
I am trying to rebuild this website in Polymer: http://qprogrammers-mockup.webflow.io/. So I can extend it easily in the future. I have everything down and I am using the same font, font-weight, font-size and I checked this with a chrome extension whatfont?.
But the fonts seems different. The example website is still much sharper. I read the css, but I cannot find out why. I also added:
body {
background-color: e8e8e8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
Given your example, I cannot tell how much more CSS you have. But this may just be a case of you not invoking the webfont Open Sans and your browser is reverting to whichever sans-serif it is using. You could add the following line to the top of your CSS and see if it makes a difference:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
Finally, you are missing a '#' on your background color property:
background-color: #e8e8e8;
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.
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.
I have several modules with smartGWT using the same visual theme. Have I to create my own CSS-file and there overwrite necessary classes? If I plug this file to the host-pages of the modules, will my styles always override the standard themes classes?
I used to override somme native style in my css file, the only care I take is to add !important to force my style whatever style is apply by the framework
For exemple:
.formTitle,.formTitleFocused,.formTitleDisabled {
font-family: Arial, Verdana, sans-serif !important;
font-size: 11px !important;
color: black !important;
}
.splitbar:hover {
cursor: e-resize !important;
}
Hope it could help..
The appropriate way to theme/skin SmartGWT is described here.