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.
Related
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.
This might seem basic, but I can't figure out how to use CSS variables in LESS?
variables.css:
.root {
--header-color: white;
--content-color: yellow;
}
styles.less:
#import "../variables.css";
.header {
color: #header-color;
}
I get error "#header-color is undefined".
LESS allows you to use normal CSS code, so use one option could be just use the variable as CSS:
#import "../variables.css";
.header {
color: var(--header-color);
}
Also, you can save the css var to a LESS var:
#import "../variables.css";
#header-color: var(--header-color);
.header {
color: #header-color;
}
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'm building an HTML5 App that needs to have different skins applied by the user. I'd be keen to hear the best way to go about this with SASS. I'm new to SASS and this solution works but there must be a better way. The method applies and extra class that i'm sure is not needed.
My idea is to compile and ship two css files and then let the user choose over a select tag.
Any advice?
This is some example code that i'm using now:
The "mixin" _skin.scss
$skin: default-skin; // Default skin
//$skin: dark-skin; // Dark skin
.default-skin { // Default Skin
#import 'skins/_default-skin';
}
.dark-skin { // Dark Skin
#import 'skins/dark-skin';
}
// Applying the Skins
html {
#if $skin == default-skin {
#extend .default-skin;
} #else if $skin == dark-skin {
#extend .dark-skin;
} #else {
#extend .default-skin;
}
}
The default skin partial
.nav{
background: $gray-light;
button{
color: $white;
&:active{
color: $gray-lighter;
}
}
}
And the dark skin partial
.nav{
background: $gray-darker;
button{
color: $black;
&:active{
color: $gray-dark;
}
}
}
I checked few topics I this one is kinda new, I found one similar but not the same case.
So, my project is working perfect with sass and font-awesome.
I am importing the font-awesome scss file:
//libs
#import "css/font-awesome/scss/font-awesome";
And my sass class I am using
&:hover {
font-family: FontAwesome;
content: $fa-var-android;
}
I don't want use font-family: FontAwesome; in every class, it's some way to use just like that?
&:before {
content: $fa-var-android;
}
Or even better: just the unicode?
&:hover {
content: '\f26e';
}
I tried but did not work, someone can give me a help?
Thank you.
Here is a solution use a common class for the font family.
HTML
<div class="a b">
</div>
CSS
.a{
font-family: FontAwesome;
}
.b:before{
content: '\f26e';
}
.b:hover:before{
content: '\f2a3';
}
&:hover {
content: '\f26e';
}
&:before {
content: '\f003';
}
&:hover, &:before {
font-family: FontAwesome
}
So you can add all the classes and pseudo-classes you want after commas and include the font family in one go!
I'd create a mixin for that purpose, and in that mixin you include the FontAwesome family-font and the content variable:
$icon: 'bar';
$icon-2: 'baz';
#mixin fa($icon){
font-family: FontAwesome;
content: $icon;
}
.foo{
#include fa($icon);
&:before{
#include fa($icon-2);
}
}
And the output:
.foo {
font-family: FontAwesome;
content: "bar";
}
.foo:before {
font-family: FontAwesome;
content: "baz";
}
Thanks for your help, I am agree with this answers above but these just apply in few classes not in all my css. understand?
so I found a better way to do this just like that:
body {
font-family: FontAwesome,Helvetica;
}
so like that I can use the unicode and the variables and I don't need write font-family in my classes.
&:before {
content: $fa-var-android;
}
&:hover {
content: '\f26e';
}
Thank you.