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
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>
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 have a .tintTile that depends on parent, hence the & sas follows:
// Tint titles
.tintTitle {
text-transform: uppercase;
font-family: #fontDemiBold;
color: #colorOrangeKWS;
.Windows7 & {
font-family: arial, sans-serif;
font-weight: bold;
color: #colorOrangeKWS;
}
}
In many others classes, I use the .tintTitle as follows:
// titles, orange bold
.tab {
&>div {
.tintTitle;
// etc.
}
}
Unfortunately, I can't achieve the .Windows7 (provided the fact Windows7 is a class set to the body tag as follows:
<body class="Windows7">
<p class="tintTitle">Good, it works</p>
<div class="tab">
<div>This title doesn't make it</div>
Is there a way to achieve my goal with less beside duplicating every .tintTitle where it's required?
As far as i understand your question your code should work in Less, see http://codepen.io/anon/pen/KwNWmq
Less code:
// Tint titles
.tintTitle {
text-transform: uppercase;
color: green;
.Windows7 & {
text-transform: initial;
color: red;
}
}
.tab {
&>div {
.tintTitle;
// etc.
}
}
Your are using the parent selectors feature of Less to change the selector order
The only thing you should notice will be that properties set for your (not having .windows) will be also applied for your .windows selectors. That's why i have to set text-transform: initial;, otherwise the .windows * also get uppercased cause the also match .tintTitle.
I want, very strongly, to avoid littering my markup with non-sematic <i> tags and am attempting to use the icon-* CSS classes on other elements, such has headers, the primary use case.
I have the following markup:
<div class="box-header">
<h2><i class="icon-list-ul"></i><span class="break"></span>Unordered List</h2>
</div>
<div class="box-header">
<h2 class="icon-list-ul">Unordered List</h2>
</div>
The first is the original markup, the second is my desired markup. Rendered, they look like:
I'll worry about the divider later. Note, however, the difference in 'boldness' of the text. I notice that Font Awesome by default applies its font (and some other properties) to anything with a CSS class matching icon-*, and my first attempt to correct the problem revolved around changing this css:
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
Into the following to ensure the the font selection is only applied to the :before icon content:
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
Now I have a different problem, as can be shown in the following screenshot:
While the font weight is back to the normal (thin) value, the alignment of the text has shifted down substantially, both for the standard markup and my desired markup cases. What's going on here, and how can I use the icon-* classes on arbitrary elements without those elements own formatting getting out-of-wack?
Thanks for any assistance you can offer!
As this has lingered for a long time, I'll post a self-answer pointing out the methodology I utilize these days, which involves a SASS/SCSS mix-in.
Basically, follow the methodology of FontAwesome itself, with the exception that instead of populating a bajillion generic CSS classes for use with non-semantic <i> (italic) tags, populate the SCSS variables for each character, and dynamically apply via #include to the specific elements you wish to have icons applied to.
From the gist example, to automatically apply social media icons to links onto those platforms unless otherwise disabled, you can:
a:not(.no-icon) {
&[href^="https://twitter"],
&[href^="https://www.twitter"] { #include icon($icon-twitter-square, false, true) { margin: 0; }; }
&[href^="https://facebook.com"],
&[href^="https://www.facebook.com"] { #include icon($icon-facebook-square, false, true) { margin: 0; }; }
&[href^="https://linkedin.com"],
&[href^="https://www.linkedin.com"] { #include icon($icon-linkedin-square, false, true) { margin: 0; }; }
&[href^="https://youtube.com"],
&[href^="https://www.youtube.com"] { #include icon($icon-youtube-square, false, true) { margin: 0; }; }
}
Have login / log out links?
&[href$="/account/authenticate"] { #include icon($icon-sign-in, false, true) { margin: 0; }; }
Want icons defined in the HTML markup? Okay!
[data-icon] {
padding-left: 3.5em;
position: relative;
vertical-align: middle;
#include icon(attr(data-icon)) {
margin-left: -3.5em;
width: 3.5em;
text-align: center;
}
}
The difference in boldness comes down to alternate font-smoothing being applied. Forcing -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale help to mitigate.
your content inside of <h2 class="icon-list-ul"> will be affected by the awesomefont setting in [class*=" icon-"] ....
If you want to use different font styles for h2-tags and before-elements,
just keep [class*=" icon-"]:before and delete [class*=" icon-"]
My CSS contains
a.myLink {
hover {font-size: 24;
font-weight: bold;
color: red;
}
I'd like to be able to reference it using
<a class="myLink" href="http://myUrl" target='_new'>myName</a>
However, CSS does not get recognize this call.
What am I missing here? Please advise.
a.myLink {
hover {font-size: 24;
Is not correct syntax, look at using
Link Properties:
a.myLink {
/* Some formatting for the link here */
}
Hover Properties:
a.myLink:hover {
font-size: 24;
font-weight: bold;
color: red;
}
You need
a.myLink:hover {
font-size: 24;
font-weight: bold;
color: red;
}
if you want to add these styles when someone hovers over the link.
You shouldn't have any asteriks(*) in your HTML code. Maybe you only added those for this demonstration?
But for a hover effect you want something like this:
a.myLink:hover { /*code here */ }
just a bit of mixed up syntax.