Suppose I have an element where the text color is inherited:
element { color: inherited}
I'd also like to darken this on hover:
element:hover { color:darker(10%) }
Is there a pure css (No javascript) trick/hack for this that has fairly good browser support?
you can use filter to get near to what you want to achieve.
see the attached demo
.p{
color: blue;
font-size: 2em;
text-transform: uppercase;
font-weight:bold;
font-family:arial, sans-serif;
}
.c:hover{
filter: brightness(0.2)
}
<div class="p">
<div class="c">hello</div>
I have some problem in my p element.
here is my html and css
#font-face {
font-family: 'Raleway Medium';
src: url('Raleway-Medium.ttf') format('truetype');
}
.item_txt{
padding-top : 10px;
box-sizing: border-box;
padding-right: 15px;
padding-left: 95px;
font-size: 21px;
color : #F9F9F9;
text-align: left;
cursor: pointer;
font-family: 'Raleway Medium' !important;
}
I tried to import custom font but it failed.
<div class="col-sm-7 col-sm-offset-2">
<div class="item_box">
<img src="images/boardicon1.png" class='item_img'>
<p class="item_txt">Mother Board</p>
</div>
</div>
ႈhere is project directory.
The problem is that it works fine if the computer you are rendering it has the font installed as TrueType font, but if this is on web and the user that renders that page does not have that font installed locally it will fallback to browser default or your default if defined. You need to use a web version of that font, woff or woff2. Using google font will get you back the web version even if you don't ask for it. Search for the woff/woff2 version of the font and us that.
Put this at the top of your style sheet:
#import url('https://fonts.googleapis.com/css?family=Raleway');
Than use this to use the font on certain elements:
p {
font-family: 'Raleway', sans-serif;
}
My question is pretty simple, but I can't get it to work.
I understand that you can make a button with Bootstrap + Glyphicon like so:
<span class="glyphicon glyphicon-chevron-left"></span> Default text here
But, I want the content & styling seperate (as is normal, right?), because it makes editting a lot easier (just one scss file instead of 54 html files with buttons).
Can I use ::before or ::after on the button and then use "content" in scss to include a Glyphicon? If so, how?
The first idea probably is do something like this
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
.glyphicon-chevron-left;
}
}
but that compile into something like:
.my-btn:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.my-btn:before:before { /*this is wrong*/
content: "\e079";
}
And nested pseudo-elements It is not possible if I am not mistaken see this Nesting pseudo-elements inside pseudo-elements
So you have to do this:
//HTML
Default text here
//CSS
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
}
&.my-chevron-left{
.glyphicon-chevron-left;
}
}
PD: I'm using less, in SCSS is quite similar
So on the current website i'm working on, I can't make any changes to the css stylesheet on the page. When I try and make a change it works initially but as soon as I let go of the mouse it reverts back to what it was. It is like the stylesheets or locked or something. I would like to take some of the top padding of the title and change it's size but but it will not permanently change. Have a look at the website emmaanddavidswedding.com and you will see what I mean. I know for sure that it is my coding and not the dreamweaver program because I dont have this problem when working on other files/websites. If anyone can lend me a hand that would be great. Thanks in advance. Here is the code:
html
<div class="title">
<a class="title a href" href="http://www.emmaanddavidswedding.com">Emma & David's Wedding</a>
</div>
css
.title {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: 363%;
width: 100%;
padding-top: 15%;
margin-top: 1%;
text-align: center;
}
.title a href {
color: #ffffff;
}
.title a:hover {
color:#ffffff;
text-decoration:underline;
}
The following is the issue here.
<a class="title a href">
You cannot have gaps in your class names. For to work you need this in your CSS
.title.a.href {
}
I would advise against having a .a class name and .href class name.
Instead try
<a class="title">
and use
a.title { }
to target it
I have some CSS that looks like this:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
I would like to replace the image with an icon from Font Awesome.
I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?
You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.
Be sure to set position:relative on your actual text wrapper for the positioning to work.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDIT:
Font Awesome v5 uses other font names than older versions:
For FontAwesome v5, Free Version, use: font-family: "Font Awesome 5 Free"
For FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"
Note that you should set the same font-weight property, too (seems to be 900).
Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).
Actually even font-awesome CSS has a similar strategy for setting their icon styles. If you want to get a quick hold of the icon code, check the non-minified font-awesome.css file and there they are....each font in its purity.
Consolidating everything above, the following is the final class which works well
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
To use font awesome using css follow below steps -
step 1 - Add Fonts of FontAwesome in CSS
/*Font Awesome Fonts*/
#font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
Step - 2 Use below css to apply font on class element of HTML
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.
You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/
#content h2:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "\f007";
}
I am bit late to the party. Just like to suggest another way.
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
position, left and bottom are used to align the icon.
Sometimes adding font-weight: 600 or above also helps.
No need to embed content into the CSS. You can put the badge content inside the fa element, then adjust the badge css. http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Example Link:
https://codepen.io/bungeedesign/pen/XqeLQg
Get Icon code from:
https://fontawesome.com/cheatsheet?from=io
Alternatively, if using Sass, one can "extend" FA icons to display them:
.mytextwithicon:before {
#extend .fas, .fa-angle-double-right;
#extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
It seems that the given answers don't give a real background as the fontawesome is rendered outside the bloc you want the background in.
Here is my solution to have a "real" background effect :
html :
<div id="bloc" class="bg_ico_outer" style="">
<i class="fa fa-bookmark-o bg_ico"></i>
<div class='bloc_inner'>
<h2>test fontawesome as background</h2>
</div>
</div>
css :
.bg_ico {
position: absolute;
top: 0px;
right: -10px;
font-size: 17em;
color: green;
transform: rotate(25deg);
}
.bg_ico_outer{position: relative; overflow: hidden;}
#bloc{
height: 200px;
width:200px;
background: blue;
margin:50px auto;
}
.bloc_inner{
position: absolute;
}
h2{color: white;}
For this you just need to add content attribute and font-family attribute to the required element via :before or :after wherever applicable.
For example: I wanted to attach an attachment icon after all the a element inside my post. So, first I need to search if such icon exists in fontawesome. Like in the case I found it here, i.e. fa fa-paperclip. Then I would right click the icon there, and go the ::before pseudo property to fetch out the content tag it is using, which in my case I found to be \f0c6. Then I would use that in my css like this:
.post a:after {
font-family: FontAwesome,
content: " \f0c6" /* I added a space before \ for better UI */
}
This seems to be the simplest solution :-)
#content h2:before {
font-family: FontAwesome;
content: "\f055";
position:absolute;
left:0;
top:0;
}