I have a mock-up site template made entirely using only HTML5 and CSS3 located here.
I then started with Font Awesome 5, using the CSS webfont option (as appose to the SVG with JS version).
I found a neat trick using <span class="fas fa-hashtag fa-border" aria-hidden> Lorem ipsum dolor sit amet,</span> instead of using <span> and <h1> tags.
Which renders as such, here.
How do I alter the default font?
P.S. span {font-family: “Font”, sans-serif;} does not work.
P.P.S. .fa-border {font-family: “Font”, sans-serif;} doesn’t work either.
This is because you have used .fas class in your span which has font-family Font Awesome.
So I will suggest that wrap your icon in an <i> tag and then apply font to <span>. For border apply fa-border class to <span>
Stack Snippet
span {
font-family: Verdana;
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<span class="fa-border"><i class="fas fa-hashtag"></i>Lorem ipsum dolor sit amet,</span>
You added Font-Awesome to the header. But as it only contained one glyph it could not render, so it was replaced with browser default.
Try targeting the :before element instead
.fa, .far, .fas {
font-family: "Roboto"; // or any font you wish to use
}
.fa:before, .far:before, .fas:before {
font-family: "Font Awesome\ 5 Free";
}
Related
I have just started making a website and wish to include multiple fonts. I'm new to HTML and CSS and don't quite get how they interact. When looking up a tutorial for how to do so, it shows only HTML, despite explicitly saying CSS.
The W3Schools tutorial I am currently using shows this:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Doesn't the header define this as an HTML file? How does CSS play into this?
The style tag (a.k.a. what you are mentioning) specifically allows CSS to be embed into a HTML document. It can use any CSS, as long as it is encapsulated within the tag.
<style>
body {
background-color: #333;
}
</style>
This is different from the linking of a external CSS file which uses the link element:
<link rel="stylesheet" href="./styles.css">
However, you can also use the style attribute to add styles to an individual element on its tag's HTML.
Google
For the relationship between the two, HTML (Hyper Text Markup Language) is the basic blueprint / building blocks for the page and the structure it should be rendered in, while CSS (Cascading Style Sheets) describes what the page should look like. They are tightly knit and are meant to be used together. That is why the style tag specifically includes CSS in HTML. You can include both CSS and JavaScript in HTML or you can link them through external files.
Everything between the tags <style>and </style> is the css here.
There are other ways to integrate css.
You can attach a style directly to an html element:
<p style="text-align: center; color: green;">
this paragraph will be centered and green
</p>
Or you can write your styles into an extra textfile and link to this file in the header of your page
<head>
<link rel="stylesheet" href="stylesheet.css">
...
</head>
I'm trying to build Bootstrap from SCSS, but I'm not experienced in front-end technologies at all. Is there any way to set a bold-by-default font instead font-weight everywhere it's used? The font-weight version is rendered distorted. I'm using a custom CSS now overriding the font-family everywhere where it's needed (h1...h6, b, strong, etc.) but it's not too convenient.
use font-weight-bold class to get bold font.
Load a bold font by default:
*{
font-family: 'Lato', sans-serif;
font-weight: 900;
}
<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>etc.</p>
<span>everything is bold now</span>
I'm trying to incorporate font-awesome icons in my webpage, and it all works fine, until I change to my font of choice, Exo 2, and the icons show up as a bordered square. It works fine with other fonts, but for some reason this won't work.
I have included the font-awesome stylesheet, and the google fonts stylesheet.
If anyone could point me to what I'm doing wrong, would be appreciated!
This issue with font-awesome could be due to setting other font to the icon. Please see this fiddle
.parent1,
.parent1 > i{
font-family: 'Open Sans', sans-serif;
}
.parent2{
font-family: 'Open Sans', sans-serif;
}
<script src="https://use.fontawesome.com/a30dc5ca39.js"></script>
<div class="parent1">
<i class="fa fa-times"></i>This won't work
</div>
<div class="parent2">
<i class="fa fa-times"></i>This works
</div>
If you set the font to the child element i.e. the <i> element, then font-awesome won't be rendered as you expect.
In the second example I only set different font to the parent, but not the icon, and it works as expected
fontawesome is font icons and Exo 2 is font and not "font icons"
to work fontawesome u must apply
font-family: FontAwesome;
and if u change it to something else here i think "Exo 2"
font-family: Exo 2;
it wont work and will disply u square
After a migration of an existing Content Management System i have some problems with existing classes - sometimes the Richtext Editor created the following HTML Code:
<span style="font-weight: bold; "><a href=""....>
Now, the Link is not bold, but i dont know if it is possible to overwrite any rule in CSS when having a custom inline Style property.
Is there any chance (without changing the HTML Code) to make the link as bold text?
Thanks in advance for any help.
Thanks for the first comments - but to be sure i want to add the "bold" tag only when ill have this "special" inline property. So i dont want to overwrite all classes with bold text.
When i have
<span><a style="font-weight: bold;">....</a>
Everthing is fine, the Link is bold
But when i have
<span style="font-weight: bold;">....
The link is NOT bold (but it should be bold).
This is little stupid Code from the Richtext Editor.
Original:
Use !important :
span {
font-weight: normal !important;
}
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
Edit:
This means that in your CSS, there is somewhere :
span {
font-weight: normal !important;
}
You need to overwrite it by selecting the span with more specificity than the declaration in the current css, e.g:
/* somewhere in the css you can't modify */
span {
font-weight: normal !important;
}
/* the css you add */
.container span {
font-weight: bold !important;
}
<div class="container">
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
</div>
The is because classes, ids, attributes, etc all have a score which add up to see which declaration will be used.
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
- smashingmagazine.com
And here is an cheat sheet :
I want to change the font of the <p> tag in HTML so I tried:
<p style="font-family:'Myriad Pro','sans-serif'; font-size:10.0pt; color:#BE2D0F; ">
But it doesn't work, any suggestion how to do that? I need to change the font to this font color, font, and font type.
That code is correct.
See: http://jsfiddle.net/bcEKb/
Note that this only sets the style for that single <p> tag. To set the style of EVERY <p> tag, you need to use a separate stylesheet or put it in <head> like so:
<html>
<head>
<style type = "text/css">
p
{
font-family: "Myriad Pro", "sans-serif";
font-size: 10pt;
color: #BE2D0F;
}
</style>
</head>
<body>
<p>This paragraph has the style applied.</p>
<p>So does this one.</p>
</body>
</html>
See: http://jsfiddle.net/G6TKe/
If you have a external CSS file, ensure that you put a class for p if you want it to be used on EVERY paragraph, if its just the one paragraph then just put the code inline (as you have done and it works)
Try specifying the font names without the single quotes.