How can I change the font icons used for following class using font Unicode.
ui-grid have following classes as default
.ui-grid-icon-plus-squared:before {
content: '\c350';
}
.ui-grid-icon-minus-squared:before {
content: '\c351';
}
default unicode is c350 and c351, I have replaced it with fontawesome unicode like below
.ui-grid-icon-plus-squared:before {
content: '\f067';
}
.ui-grid-icon-minus-squared:before {
content: '\f068';
}
and keeping font-awesome font files in ui-grid.css/fonts folder
it didn't changed the icons, do I need to do some more changes or it does not work like this?
Change font-family property to font awasome font, like:
.ui-grid-icon-plus-squared:before {
font-family: "Font Awesome 5 Free";
content: '\f067';
}
Or the font you want.
Related
Using a Rails 6.1.4.1 app and trying to upgrade from FontAwesome 4 to 5.
gem 'font-awesome-sass', '~> 5.15.1'
In my app/assets/stylesheets/application.scss file:
#import "font-awesome-sprockets";
#import "font-awesome";
Using FA via the icon or via SCSS does not work for Chrome or Firefox. It does work fine in Safari.
Examples of how I'm using it:
.btn-icon {
#extend .btn;
&:before {
font-family: "Font Awesome 5 Free";
padding-right: .5rem;
}
}
.btn-new {
#extend .btn-icon;
#extend .btn-primary;
&:before {
content: "\f067";
}
}
link_to icon('fas', 'cogs') + t(:quote_sheet_options), ''
The icons simply don't show in Chrome/FF - what's going on here?
Update
If I setup my css as shown below, it works. But I still can't use the icon helper to show any icons in my markup, and I can't show the icon by adding the markup manually either.
.btn-icon {
#extend .btn;
&:before {
#extend .fas;
font-family: "Font Awesome 5 Free";
padding-right: .5rem;
}
}
.btn-new {
#extend .btn-icon;
#extend .btn-primary;
&:before {
#extend .fa-plus;
}
}
You can use font_awesome5_rails. The helper you will use is not icon, it is fa_icon. There are samples on font_awesome5_rails but here is one:
fa_icon('camera-retro', class: 'my-class', text: 'Camera', size: '3x')
I hope this works for you.
I have a custom icon font (generated with Icomoon).
body {
--pseudo-element-content: '\e900';
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
}
However, when doing this, my pseudo element doesn't appear in my browser (as if it didn't have any content). It looks like my css variable has the icon value interpreted and not its code.
If I change it to
div::before {
font-family: 'CustomFont';
content: '\e900';
}
it works like a charm. I tried a few tricks (string concat, adding ' and escaping them) but it didn't work.
I've tried it and it work with another character (see the snippet).
It seems that you don't have that font on your OS and the browser can't render it.
body {
--pseudo-element-content: "\016E";
}
div::before {
font-family: "CustomFont";
content: var(--pseudo-element-content);
}
<div><-- </div>
CSS variables are placed in the rules, not at the top level:
selector {
padding: 100px;
--some-var: 'abcdef'
}
Variables are inherited like the ordinary CSS rules.
If you want the variable to be visible everywhere, add it to html (or :root):
html {
--pseudo-element-content: '\e900';
}
Answer to edited question:
You are trying to place the styles inside each over, which is not supported in CSS. Perhaps, originally code was for CSS preprocessor - SASS.
The fix:
body {
--pseudo-element-content: '\e900';
}
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
I want to set a global font with CSS in one of my projects.
What I have tried is the following:
#font-face {
font-family: HoftypeLight;
src: Valid URL;
}
* {
font-family: HoftypeLight;
}
but it seems not to work.
I know that I properly get the font because I have tried to add to one of my texts this class:
.test {
font-family: HoftypeLight;
}
and it works.
Hello I think use like this
body {
font-family: Algerian;
}
font same for in all project within the body tag.
So I'm trying to change the default breadcrumb style with SASS. I've setup everything as mentioned in the official Bootstrap 4 beta 3 docs. I've changed the following in the custom.scss
$breadcrumb-divider: "\f105"; //fontawesome icon for fa-angle-right
Now this also needs font family to set to
font-family: 'fontAwesome'; //How do I plug this in
How do you setup the font for the .breadcrumb-item::before class in the right way?
Try this:
.breadcrumb-item::before {
font-family: 'FontAwesome';
content: "\f105";
}
The actual tag as listed in breadcrumb.scss is:
.breadcrumb-item + .breadcrumb-item::before {
font-family: 'FontAwesome';
content: "\f101" !important;
}
The !important should overwrite the standard styling set.
I hope this helps.
If you are using Bootstrap 4 and Font Awesome 5,
.breadcrumb-item + .breadcrumb-item::before {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
}
you are defining a variable for the scss like:
$breadcrumb-divider: "\f105";
now you have to set this variable in the pseudo-element ::before content property. and also apply the font shorthand property to it.
.breadcrumb-item+.breadcrumb-item::before{
font: normal normal normal 14px/1 FontAwesome;
content: $breadcrumb-divider;
}
I think it should be work please try it.
Thank you.
2020 - Google brought me here for something similar.
To change the separator from the standard "/" to ">>" without using an icon library or messing with a svg, here is the css snippet which can be applied via a custom class 'breadcrumb-custom' on
the 'ol' tag.
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
content: ">>";
font-weight: bold;
color: #000000;
}
This may be a bit late to the party, but I wanted to give an updated answer for current library versions.
If you are using Bootstrap 5 and FontAwesome 5, this SCSS will work.
.breadcrumb-item {
+ .breadcrumb-item {
&::before {
font-family: "Font Awesome 5 Free";
font-weight: 700;
content: "\f054" !important;
}
}
}
I can use Font Awesome icons in the following way:
.icon-car {
content: "\f1b9";
}
Is it possible to make it to contain more than one icon (say \f1b9 and \f1b8), with a non-breaking space in between once?
Yes, it's possible. You can either use non-break unicode character \00a0.
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.icon-demo:before {
font-family: 'FontAwesome';
content: "\f1b9\00a0\00a0\00a0\f1b8";
}
<span class="icon-demo"></span>
Or, simply use one blank space in between, in most of the case, however if you need more than one space, make sure to set white-space: pre;, so that any whitespace will be preserved.
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.icon-demo:before {
font-family: 'FontAwesome';
content: "\f1b9 \f1b8";
white-space: pre;
}
<span class="icon-demo"></span>