I am using Icomoon to create custom font icons, i have a situation where to icons need to be in the same span such as:
<span class="glyph2" aria-hidden="false" data-icon=" "></span>
But they both need to be different colors. Is it possible at all to do this?
And here's the JSFIDDLE containing all the code, but i cant seem to get the custom fonts working in jsfiddle.
Any Help Greatly appreciated.
I don't believe this is possible using only the data-icon attribute.
You could use IcoMoon's icon- classes instead and use the before CSS pseudo selector on one, and the after selector on the second.
icon1:before {
content: "A";
color:red;
}
.icon2:after {
color: blue;
content: "B";
}
I have demonstrated this in a Fiddle.
I haven't been able to demonstrate that in the fiddle, but it looks like it can work.
IcoMoon's are styling in an :before pseudo selector. Acordingly to css the first-letter pseudo-selector should work on the generated content, and so including the :before data.
So, including
.glyph2:first-letter {background-color: blue; color:white}
You should be able to give this appearance to the first icon (generated in
a :before pseudo element with 2 custom chars).
It worked for me in local, but I couldn't get it to work in the fiddle.
Related
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
I want to have a CSS selector for a header with custom font, color and a bullet to the left. So I want my header to use my custom font, and it's :before pseudo-element to use font-awesome. So I would like my :before to have the .fa class, while the whole element doesn't have this class.
I have this html: <h1 class="bulleted-header">Hello</h1> And I would like to write something like this in LESS:
.bulleted-header {
color: #61cbe6;
font: 16px 'ds_goose', sans-serif;
&:before {
content: #fa-var-bullseye; // font-awesome's bullet icon
.fa; // calling font-awesome's class. DOESN'T COMPILE
}
}
The problem is that .fa class is declared like this in font-awesome LESS sources: .#{fa-css-prefix} { ... }, so the code above doesn't compile. I tried to reuse the .fa code like this:
&:before {
content: #fa-var-bullseye; // font-awesome's bullet icon
.#{fa-css-prefix}; // DOESN'T COMPILE
}
and like this:
&:before:extend(.#{fa-css-prefix}) { // compiles but no effect
content: #fa-var-bullseye; // font-awesome's bullet icon
}
I know I can just change my html like this <h1 class="bulleted-header"><span class = "fa fa-bullseye"></span>Hello</h1> and not to use :before at all, but it's more logical to keep all this bullets thing in CSS.
I ended up just copy-pasting the content of .fa into my :before, but there is something wrong in this approach because now I have to maintain this code myself in case FA guys change something. Are there any more elegant solutions?
You can not really use interpolated selectors for mixins in Less ... so the rules with interpolated selectors can not be included in other rulesets. See answer here:
LESS mixin a variable class name
But in your case you could just import the compiled css as less instead of the less files, if you are not doing any other special stuff with these less files. Simply by using:
#import (less) 'font-awesome.css';
Then you can use .fa as a mixin, exactly like you wanted.
However, this way you don't import the character variables, which you could do separately, but instead you could also just use content: "\f140"; directly (the way it's used in .fa-bullseye:before)
Or alternatively just extend the selectors imported from font-awesome.css with your selector, like so:
.bulleted-header {
color: #61cbe6;
font: 16px 'ds_goose', sans-serif;
&:extend(.fa, .fa-bullseye all);
}
Hope this helps.
Update:
As of LESS >= 1.6 rules with interpolated selectors can be accessed as mixins. So calling .fa as a mixin, like you do in your above example, should now work perfectly.
I had the same problem using the SASS-implementation. I changed the .#{fa-css-prefix} code so it does .#{fa-css-prefix}:before and this worked pretty fine for me. You still have to extend your base element then, but the font-style is only applied to the :before
I actually wondered why they did it like that. I think their approach was that you have single dom elements for every icon (like the <i> they use) and no icon in front of a button, link, list item or whatever as you would usually do it. But as far as I remember this was the case in the last fontawesome version.
I have a class that I apply to a span to format it a bit different to show an action someone must take.
<p>Example of styling a <span style="background-color:#ccc; color:#066; font-weight:900; padding:0 8px;">Button</span> press.</p>
This example shows an inline style but it will eventually be in a class. What I want to know is is it possible to add angle brackets around the text as part of the styling? I know that <q> can achieve this but I want this to be part of the styling information. Is this possible in anyway.
Many thanks for any help in advance.
Yes you can include brackets in your styles using pseudo-elements, it isn't supported by <= IE7 though (~4.5% market share last time I checked). This method uses pseudo-elements :before and :after to generate content based on CSS before and after the element respectively (while still remaining inside .button).
jsFiddle
.button:before {
content:"<";
}
.button:after {
content:">";
}
You can do this easily with the pseudo :before and :after and content.
span:before {
content: "«";
}
span:after {
content: "»";
}
I also think that this would be more appropriate as a kbd element.
http://jsfiddle.net/ExX66/
My code for changing background of checkbox:
.question11 input[type=checkbox] + label {
display: block;
height: 16px;
padding-left: 25px;
background: url(images/bg.gif) top left no-repeat;
}
The problem is it's not working with Internet Explorer 9.0.4.
The CSS selector is too complex for IE. The easy solution is to give a class or id to the checkbox and the label if you can change the HTML.
<input type="checkbox" class="foo"><label class="foo">...</label>
.question11 .foo {
...
}
Juhana is right.
The other problem is, you can't style checkboxes 100% individual via CSS only.
There are great plugins for it, so you can completely replace the checkboxes etc. via images.
--> Uniform - sexy forms with jQuery for example.
The rule does not set any properties on any checkbox. It only applies to label elements in a specific context, and that’s how it works, on IE 9 and other browsers.
If you would like a rule to apply to any checkbox element that is immediately followed by a label element (as I guess), then you would need a different kind of selector—something that does not seem to exist in the CSS Selectors Level 4 draft, still less as supported. So you would need to add some markup, like class attributes for checkboxes.
Try like this
.chh {
background-image: url(images/checkbox_bg.gif);}
if(document.getElementById(id+ii).checked==true){
document.getElementById(id+ii).className==chh;
}
First write css then apply javascript function
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.