Is it possible to change the font from the <pre> tag? For example, I don't like the courier font, but I do like the consolas font. Hod od I change this in css?
I tried the following:
pre {
color: white;
font: "Consolas";
}
but that didn't work in Firefox/IE...
Thank you!
Yvan
The font shorthand property requires that you specify the font size.
Use the font-family property instead.
font-family should work. try
.pre {
color: #fff;
font-family:Consolas;
}
Related
I don't know why I am getting this 3d effect in words. How can I remove the effect and flatten the words?
The font family is Poppins
body {font-family: "Poppins";}
You can do any formatting with CSS.
a {font-style: normal;}
will make font style as normal
There may be a CSS conflict. Try this. Change class & the colors as suitable.
add
text-shadow: none;
.text-class
{
text-shadow: none;
background: #333;
color: #fff;
}
I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}
I have a WordPress site here: http://www.iliveaccountable.com/
That I want to change the first element "iLiveAccountable" to font family to CaviarDreams_Italic.ttf and change the text-transform into "none" so that it will follow the exact text.
I place all my fonts on a folder and added this code on my style.css sheet and tried to play it using the inspect element since I am only targeting the first element in the navigation:
#font-face {
font-family: Caviar Dreams;
src: url(http://www.iliveaccountable.com/wp-content/themes/unicon/fonts/CaviarDreams_Italic.ttf);
font-weight: normal;
}
li#menu-item-15113{
text-transform: none;
font-family: Caviar Dreams;
}
For some reason I can't still change the font family as well as the text-transform. Any idea what I am doing wrong here? I really need to change it.
Try using
#menu-item-15113 a{
text-transform: none;
font-family: Caviar Dreams !important;
}
The "a" tag has its own font which is "Montserrat" thats why you can't change them via "li" tag only.
I am using Flaticon for a website I am developing but there seems to something wrong and I can't find out what.
I downloaded the zip file from flaticon with the option "icon font".
so I uploaded it into the my font's folder but for some reason when I link the css and put an <i class="flaticon-crowd"><i> in my html I get the icon in its default size but when I put font-size:70px; in the css it doesn't get bigger.
I can do color: #f00; and the text turns red so it's not the selector.
Also in the def tools in chrome show that the 70px font-size is used and not overruled.
Does somebody know what it could be that is causing this problem ?
thanks for your time.
Here is an example of the html I use
<!DOCTYPE html>
<html>
<head>
<!-- flaticon -->
<link rel="stylesheet" type="text/css" href="assets/css/flaticon/flaticon.css">
<title></title>
</head>
<body>
<i style="font-size: 70px" class="flaticon flaticon-crowd"></i>
</body>
</html>
Use this class in your css to change the font size.
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-size: 150px;
}
Hope it will solve your issue.
A better solution would be:
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-size: 1em;
}
Then the size of the icon can be modified by other classes using font-size
This worked for me:
.flaticon-fast46::before{
font-size: 40px;}
Use the pseudo class :before to modify the icon as you want. You can apply all text properties of css to modify the icons.
.flaticon-crowd:before {
font-size: 17px;
}
Just delete the 'font-size: 20px;' found in the flaticon.css file and then you will be able to set the size you want in your css file.
It's Worked For me. Add :before after the element class which you want to use for icons.
span:before{
font-size: 50px;
}
for sure you could add !important to your css declaration
For example:
font-size:100px !important;
In flaticons.css change the default class into this:
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: "Flaticon" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
the flaticon.css file contains a line that specifies the
font-size: 20px;
this applies over all the flat icons. You may delete that entry to freely edit single icons, or you can respecify a preferred icon size in that same line which will be reflected in all the icons.
<style>
#font-face
{
font-family : 'Avenir';
src : url("/fonts/Avenir999.otf");
}
p.price a span
{
/*font-family : 'Avenir';*/
font-size : 45px;
color: #889900;
}
</style>
<p class="price" style="border:1px solid red;">
<span>this text is above the middle of red rectangle if uncomment //font-family</span>
</p>
Again, the font is detected properly. Everything works fine. If I use
p.price a span
{
font-size : 45px;
color: #889900;
}
then it is perfect.
But, once I add a string font-face so that
p.price a span
{
font-family : 'Avenir';
font-size : 45px;
color: #889900;
}
the font style changes (great!), but it jumps up almost out of the red 1px solid rectangle. Why? How to fix? Why it happens? that's just the font. No padding, no margin is used.
Firefox is OK, but Chrome is a problem.
It must be something wrong with your font file. I would use Font Squirrel's font generator to build your font files to use with #font-face. It will generate the cross-browser CSS for you to use that should work better across different browsers.