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..
Related
I used:
td.product-name dl.variation dd li:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
color: #000;
margin-right: 8px;
}
to add an icon :before each list element.
The icon appears as it should on Safari:
But not on Chrome:
Why?
Here's a link to my website: https://www.mydreamtattoo.com/checkout/?add-to-cart=3981
The check icon list is in the order review table below the product name.
I've used this method to add icons :before elements with CSS in the past in other places and it has always worked. This time it didn't.
Found the issue, you need to add font-weight: 600;
I had a similar issue and found adding font-weight: 900; worked.
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.
I'm using a popular posts widget on blogger and I can't get the font to change. Im using a custom font I have everywhere else on my blog. I used this css as a temporary solution
.sidebar h2.title, .sidebar h2 {
display: none;
}
this gets rid of the title, but now I'd like the title back and using:
.sidebar h2.title, .sidebar h2 {
font-family: raleway;
}
doesn't work. I've also tried with the widget Id and some other variations..
.popularposts1 {
font-family: raleway
}
Some help would be greatly appreciated :)
Edit *
I've also tried
.popularposts .widget-title {
font-family: 'Raleway', sans-serif;
}
I'm sure it's something along these lines but i just can't figure out where I'm going wrong
You need to import the font (if you haven't) and also use quotes around the font-family declaration.
#import url(https://fonts.googleapis.com/css?family=Raleway);
.your-class {
font-family: 'Raleway', sans-serif;
}
<div class="your-class">
This is in a different font.
</div>
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 a page where I combine labels, input boxes and text areas to display some content.
I would like all of them to have the same font-family and font-size.
I have played with the font-family: inherit style but this doesn't seem to work for the input and text areas.
What would be the easiest way to ensure the same font / size over the whole page.
Ok ... this does the trick:
*
{
font-family: arial;
}
input
{
font-family: inherit;
font-size: 100%
}
textarea
{
font-family: inherit;
font-size: 100%
}
My CSS is iffy as I haven't used it in some time, but I believe doing
*
{
font-family: arial;
}
will apply to all.
I think most CSS devs will do something like
body {font: normal 10pt Arial}
At the top of the CSS file.
If you want to change labels from this, just add a
label, input, textarea {font-family:Georgia}
somewhere down the road.