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;
}
}
}
Related
I am using Inter font in my vue-vuetify project. I wanted to know that is there any way through which I can use the Inter font classes in my project directly?
Thin, Extra-light, light, medium, etc. are the classes available in Inter font. How to use these classes in my project directly?
Please refer this link for more
https://fonts.google.com/specimen/Inter?selection.family=Inter:wght#100
How can I apply any class for example Thin in my project?
Currently, I am doing this by declaring CSS in my project and setting the font-weight property as per each and every class.
But, it isn't the same as these classes.
For example, I have declared a css class namely
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 23px;
font-weight: 100;
}
Which has the same class as of Inter Regular. Is this approach correct or any other way is possible?
Which has the same class as of Inter Regular. Is this approach correct or any other way is possible?
I think a good approch would be to create a base class for Inter Regular like:
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 23px;
font-weight: 400;
}
and a thin class modifier for it, just to update the font-weight like:
.headline-5.thin {
font-weight: 100;
}
Then you can use Regular and Thin font versions in any place you like:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;400&display=swap');
.container {
font-family: 'Inter', sans-serif;
}
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 30px;
font-weight: 400;
}
.headline-5.thin {
font-weight: 100;
}
<div class="container">
<p class="headline-5 thin">Almost before we knew it, we had left the ground.</p>
<p class="headline-5">Almost before we knew it, we had left the ground.</p>
</div>
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.
The body should display a handwriting font but will only do so if the comment line is uncommented.
It seems I cannot use custom properties in #font-face? Tested on FF and Chrome.
What's going on here?
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: 'Indie Flower';
}
#font-face {
font-family: var(--fontName);
/* font-family: 'Indie Flower'; */
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: var(--fontName);
}
<p>Custom CSS properties don't work inside #font-face rule?</p>
Your original suspicion that CSS properties don't work inside #font-face is accurate. The accepted answer is incorrect and only appears to work because of a mistake (see below).
I checked in Firefox, Chrome, and Safari, and none of them accept a #font-face in which a descriptor includes a var() function. Firefox developer edition was particularly helpful, since it let me see that the #font-face rule isn't being parsed at all with font-family: var(--fontName);
I also tried using a custom property for the src descriptor, which also failed.
As far as I can tell, the CSS #font-face specification says nothing about whether custom properties should work or not. No browser has chosen to make them work. This makes considerable sense, as a single font family's source file and properties are not likely to be variable.
If you have to dynamically construct #font-face rules client-side, the best method is using the FontFace API in a script. If absolutely necessary you could even read from your CSS properties with getComputedStyle(document.body).getPropertyValue("--fontName").
The accepted answer only seems to work because it redefines the font family name in #font-face, setting it to a string with the literal value of 'var(--fontName)'. It also sets the body font-family: 'var(--fontName)'. The two strings match, so the font loads.
CSS functions like var() are NEVER evaluated inside of a string. Everything between the opening and closing quotes is evaluated literally, as this diagram from the CSS syntax spec shows. So #disinfor's code isn't referencing the --fontName: "Indie Flower"; set on :root at all.
As a demonstration, see what happens when we unquote the font-family on body, so it actually evaluates the var(). The "Indie Flower" font doesn't exist in the document, so it doesn't load, but a font named "var(--fontName)" does exist, and will load:
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: "Indie Flower";
}
#font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: var(--fontName);
}
.use-the-string {
font-family: 'var(--fontName)';
}
<p>This tries to use "Indie Flower", but it doesn't exist.</p>
<p class="use-the-string">This uses the font named "var(--fontName)"</p>
The problem is how the font-name is actually output for the browser to read. Remove the quote marks for the root var, and add them around the call to the variable.
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: Indie Flower;
}
#font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: 'var(--fontName)';
}
<p>Custom CSS properties don't work inside #font-face rule?</p>
Edit
Here's the version with a fallback.
:root {
--backgroundColor: cornflowerblue;
--textColor: white;
--fontName: "Indie Flower";
--fallBack: sans-serif;
--fullFont: 'var(--fontName)', var(--fallBack);
}
#font-face {
font-family: 'var(--fontName)';
src: url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: 'var(--fontName)', var(--fallBack);
}
p {
font-family: var(--fullFont);
}
<p>Custom CSS properties don't work inside #font-face rule?</p>
I've set bootstrap wysiwyg inside a popover. Here's the DEMO. Now if I add this:
* { font-weight: bold; }
#editor { font-weight: normal; }
It screwes up the bold directive entirely. Check it out. I tried #editor *, .popover * and other variations but nothing helps. Any ideas?
My current solution for this is instead of this:
* { font-weight: bold; }
to do this:
html { font-weight: bold; }
It might require me some extra work down the road, but it solves my problem.
DEMO
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.