Is there a way to make css icons like Font Awesome (or any other CSS icons) have 2 colors?
I know they are fonts so the color can be changed by something like style='color: red;', but is there a way to use 2 colors for the icons like an accent color and a main color?
The only options you have are,
You can use text-shadow to give it a different colored shadow or stroke.
You would need to use svg icons to control the path colors.
You can utilize color & background-color to control 2 color on the same icon, as long as you only need 2 colors (no other background).
<i class="fa fa-motorcycle blue onred"></i>
.blue {
color: blue;
}
.onred {
background-color: red;
}
fiddle
Related
I'm working on a text editor with a custom spell checker. It adds a css class around misspelled words to show a red zigzag under the word.
I also use a class to style selections in the editor with a custom background color.
.spell-error {
background-image: url("data:image/gif;base64,R0lGODlhBAADAIABAP8AAP///yH5BAEAAAEALAAAAAAEAAMAAAIFRB5mGQUAOw==");
background-position: bottom;
background-repeat: repeat-x;
}
::selection {
background-color: #99def7;
}
::-moz-selection {
background-color: #99def7;
}
<p>There is a <span class="spell-error">misstake</span> in this sentence</p>
The issue is when I highlight over a word with .spell-error the red zigzag disappears. I've tried creating a .spell-error::selection class but the issue persists. How can I make both classes appear at the same time?
The background-image will have a white background which overlays the background colour.You need to have a specific background-image for the .spell-error::selection, which has the correct background colour in the actual image.
I'm actually building a website in nuxt.js using Vuetify. I have created a menu based on one v-overflow-btn, one v-text-field and one v-btn.
Here is what my menu looks like actually.
Cause I'm a little bit maniac, I would like to change the bottom border color of my v-overflow-btn to match all the different dividers color bar of my menu. By default, the color is black.
I already tried to define my own CSS in the style section as below:
<style>
v-overflow-btn {
border-color:grey !important;
}
</style>
But nothing changes...
Could someone behelp me to change this border color? Thanks in advance :)
Try this
<style>
.v-overflow-btn .v-input__slot::before {
border-color: grey !important;
}
</style>
I had to add the deep selector in case someone else is having this issue.
.nbb >>> .v-input__slot:before {
border-color: white !important;
}
I'm newbie with react and react-bootstrap and I would like to customize background of a tab when is active and color of the text of tabs when they are not active. I have tried to overwrite background style nav-style.active in an external CSS file but it doesn't work.
How can I customize this attributes and others from react-bootstrap?
Working example https://codesandbox.io/s/pz5l469m0?codemirror=1&fontsize=14
Adding a simple CSS will work
.nav-link.active {
color: red !important;
background-color: yellow !important;
}
I'm trying to remove the gradient background color of the caption on my Vaadin panel.
My custom theme extends Valo and I want a flat background (for the CAPTION) and a white font. I've tried the following but it doesn't work.
.v-panel-caption {
background-color: #157FCC;
color: #FFFFFF;
}
On my panel, the font is white like I want but the background is still the grey gradient background.
How do I remove that gradient? Thanks!
CSS background gradient works similarly to background image, to reset that you'll need to set background: none #color;.
Example:
.v-panel-caption {
background: none #157FCC;
color: #FFFFFF;
}
gradient is the same thing as an image
.v-panel-caption {
background-image: none;
}
I'm currently using a content management system that is automatically stripping any style="color:white;" inline css, but I need to change the font color of a certain element to white. Is there any trick I can use that can make it appear as if the font is white, without using color:white? (note the white here could have been #fff, rgb(0,0,0) ect)
Note:
I cannot define a css class because <style> tags are deleted completely, and any inline color definition is changed to "color: ;". I was hoping for a solution where I can use something like webkit stroke to make something with black font appear white, or something tricky like that
color: #ffffff; is the hex of white, also if they check against that try color: rgb(0, 0, 0); or rgba(0,0,0,1);
or better yet use CSS classes:
HTML
<div class="white"></div>
CSS
.white {
color: #ffffff;
}
If the CMS actually removes a style attribute (though this may be a misinterpretation), then set class=white on the element and add the following CSS code to an external style sheet being used or in a style element:
.white { color: white }
If this is not possible, then use font markup, e.g. instead of <span style="color:white;">foo</span> use
<span color=white>foo</font>