Font-awesome Icon disappearing on change of font - html

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

Related

How do I change the font of text in fa-border?

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";
}

How to set bold font instead font weight in Bootstrap 4 SCSS?

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>

Font does not load (or render) from css file

I am trying to us a custom font in my html-file. I have uploaded the font files to github and hosted a css file on github. I checked several times that the links work and that the font-files contain actual fonts. My problem is that the text in the HTML document is displayed in the standard font and not in the 'kievit' font. Can anyone spot my mistake?
Thank you!
The CSS code in kievit.css is:
#font-face {
font-family: 'kievit';
src: local('kievit'),url(https://cdn.rawgit.com/../Kievit-Medium.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-Medium.eot);
}
#font-face {
font-family: 'kievit';
font-style: italic;
font-weight: bold;
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.eot);
}
<html>
<head>
<link rel="stylesheet"
href="https://rawgit.com/../kievit.css" type="text/css">
</head>
<span style="font-family: 'kievit', sans-serif; font-size: 36px;"> Making the Web Beautiful</span>
<br> <br>
<span style="font-family: 'arial'; font-size: 36px;"> Making the Web Beautiful</span>
</html>
Edit: I changed the font-style to font-family as suggested, but it still does not work. I the first line is still rendered in arial instead of my custom font.
Try font-family: 'kievit' rather than font-style
I'd rather place a comment, however I don't have enough reputation to do so. At first sight your code looks ok, but there could be some other errors behind the screens (blocking network requests, wrong mime-type passing) So it would be easier to debug if you could provide us with a live example.

Text of the button loses its sharpening and slightly blurred in Bootstrap

I am using Persian language and I have developed two ways to display my button in Bootstrap 3.3.6:
For the upper I have used this code:
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary"> <h4><font face="B Nazanin">
خواندن اطلاعات چهره
</font></h4></button>
</div>
And for the lower I have used this code:
//--------in the CSS-------
#font-face{
font-family: myFirstFont;
src: url("../myFonts/BNAZANIN.TTF");
}
.myButton{
font-family: myFirstFont;
font-size: large;
font-weight: bold;
}
//---------in the HTML-------
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary myButton">
خواندن اطلاعات چهره
</button>
</div>
However, as you see in the picture when I use CSS the result has not a good sharpening. I mean border of the text is not clear, if you look closely you see that the text of the button is slightly blurred.
I have found that even though we use a myButton class without any styles, and instead we set inline styles like the upper code, it still remains blurred!!!
Ensure text-shadow: none is set.
Please try this css
text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
I just encountered this issue.
This issue comes from not having a bold font available for the font you have embedded. You need to include the bold version of the font or the browser will try to render the bold version of the font badly.
It is because you have
overflow-x hidden
;) That's how I fixed it!
I found the solution by turning off in the chrome checkboxes the style panel at my element submit button and the styles aplied to the button too from other parent elements.

Change Navbar Logo Font

Is there a way to change the font of the logo, without having to the change the font of the entire page?
Or would I have to create an image using that font and insert into the Navbar?
I wanted to use a font from Google Fonts font for the logo.
Try adding font-family to inline style tag. In the below example if you change the font family then, only the font of logo changes to the specified font.
<a
class="navbar-brand logo"
href="/"
style="font-family:verdana;font-size: 21px; color: #555">
Sometext
</a>
Link HTML to an additional CSS class selector. Let's call it changeFont in this example.
.changeFont
{
font-family: 'Some font name' !important;
}
add class to anchor
<a class="changeFont">Logo Text</a>