I am using font awesome on webpage and non of the following is working on my local system
Same code works on fiddle but not the local host
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
http://jsfiddle.net/ZF7x4/33/
http://fontawesome.io/icon/arrow-circle-o-down/
I am not sure why it is not working i tried few thing but it is not working
UPDATE:
While trouble shooting further i noticed it only shows following css in localhost
.fa {
display: inline-block;
font-family: FontAwesome;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: inherit;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-rendering: auto;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}
And rest of which is visible on fiddle is not showing in localhost. Not sure why while i am using same cdn link
.fa-angle-down::before {
content: "";
}
.fa-angle-down::before {
content: "";
}
UPDATE 2:
Issue seems to be only with anchor when i use same for <i class="fa fa-angle-down"></i> it works why?
Check whether you are declaring for UTF-8 in your document?
<meta charset="UTF-8">
or
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
You can also use the below link,
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Also you can try this in your css,
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<br/>
<br/>
</body>
</html>
For my case,
<i class="fas fa-google"></i>
was not working, I found out that to make it work I, need to use it as
<i class="fab fa-google"></i>
Make use of the console on your browser inspect, option from there you will be able to see which file are not found, it might be the fonts,ttf file, download that file from github place it on the directory that it was try to load it from that should work
i also faced the same problem. my css cdns were loading good but script cdns were not loading. what you do is when ever you type your localhost address in url box of browser do following:
http://localhost:<port>/
this worked for me. Hope that it will help you.
The issue is because since font awesome 5 and up you you also need to include some other files.
2 solutions
1- use the web CDM
2- add all other folders to the localhost directory and it will work instantly
I hope it helps
I had the same problem.
I got that working by simply changing the address in
href attribute of my html file.
Before I gave the location of css file w.r.t to my current html file(index.html) as my index.html and fontawesome folder were in same folder(Hospital Inventory).
<link rel="stylesheet" type="text/css" href="\fontawesome\css\all.css">
then I gave it w.r.t to the localhost and it worked...
<link rel="stylesheet" type="text/css" href="\Hospital inventory\fontawesome\css\all.css">
Related
EDIT: So, for some reason, when setting font in "body" or "html" it didn't applied font to elements in "form", because I had only form element to test form elements, fonts didn't worked. When I just added some random text before "form" element by rolling my head on my keyboard, I found out that fonts are actually working... But I was expecting that if I set font-family rule in "body" or "html" every element will inherit that font... No CSS with "#font-face" rule needed editing...
So I have a problem with self-hosted font. I want to load Unscii font on my page, I've generated CSS file with #font-face rule and fonts (WOFF, WOFF2, TTF), linked that CSS file to my page, but when I'm trying to use this font in other CSS file, it doesn't work. Also when I trying to use other font, sizing of elements on page changes slightly, like "margins or paddings or content box", but the font face itself is still remains the same, even for "built-in" fonts. I've did everything same as in my other project where everything loaded and linked same, searched in Google, but every result refers to how link and use, so it didn't helped me.
This is how I link font-face CSS
<link href="fonts/unscii-16.woff2" rel="preload" as="font" type="font/woff2" crossorigin/>
<link href="css/unscii.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet"/>
And this is my "unscii.css" file
#font-face {
font-family: 'unscii';
src: url('../fonts/unscii-16.woff2') format('woff2'),
url('../fonts/unscii-16.woff') format('woff'),
url('../fonts/unscii-16.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
I'm using Razor Pages and ASP.NET Core 6, HTML code is located in _Layout.cshtml and works perfectly for all pages, only issue with fonts.
Thanks.
I think this might help. you can remove the '' from URL and format as an OpenType because in my styling it is working that way!
you also can check this article.
https://github.com/whatwg/html/issues/7627
Check this out!
<link href="fonts/unscii-16.woff2?v=4.5.0" rel="preload" as="font" type="font/woff2" crossorigin="anonymous"/>
CSS file
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
url(../fonts/unscii-16.woff2) format('opentype'),
}
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
src: url(../fonts/unscii-16.ttf) format("opentype");
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: Unscii;
}
I used SourceSansPro to match the font in design, FF, Safari seem ok. Chrome and IE 11 have issue.
Here is the design for the font (due to proxy, cannot upload, but have a look at FF and Safari)
Here is code:
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
type="text/css"
/>
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
It seems the bold is quite different in IE and Chrome.
In summary, need to make the font style in IE and Chrome, same as FF and Safari.
By default, the code you're using there only include the 400-weight font, and browsers have different reactions when trying to get a bold version of a lighter font - some make it bold themselves, or just load a different font. In order to load the font weights you want (along with italic versions), you can use a line like this:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
With the versions/weights separated with commas.
If you go to the Google Font page for this, you can click "Customize" to select which fonts to include, and it'll generate the embed code for you.
You can use this code
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" type="text/css" />
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
I was developing a simple website in Hungarian language, where special characters like: á, é, ű, ő etc are included in the text (head and body), and it worked perfectly in all browsers when opened from local. Once I uploaded the index.php file to the domain all special characters are displaying wrongly (like small pictures/icons). Page is done on bootstrap
I've tried changing the font-family, changed default language from en to hu, no improvement. Searched for answers already, but can't find what is wrong in my case
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Vállalati oldal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #e3e7e8;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
}
I am getting no errors
I found what the root cause was. First I started with checking if my fonts were supporting special characters (although I would expect strange signs if font would not support already on local). Everything was ok there. Naturally I tried to change fonts for different ones also supporting local language but- no luck.
Then I started to think that either there needs to be sth wrong at my hosting side- so when I upload the page to domain or with the uploading process itself.
Issue came to be with the uploading process. I am using filezilla for upload of my index.php file and all other files. It came that when I am setting up a connection I needed to do two things:
1. check the option: Force UTF-8 in the charset tab while setting up the connection
2. once connection is set up and before files are uploaded right click in the connection established part of filezila and choose "enter custom command" once small window pops up I put in there a "opts utf-8 on" command, then I got the success message in the main window
After all this I have uploaded my files and everything worked perfectly. All special characters are displayed!
I am developing an application that uses a webview for the primary interface. Upon startup, the program loads a page that is included in the Content directory of the project, complete with external style sheets and scripts and they all load properly. The code to load is:
webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));
And the content of landing.html is as follows. It all works properly.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<title></title>
</head>
<body>
...
</body>
</html>
A problem has arisen when I try to use NavigateToString() to load rendered content into the viewer and try to use these style sheets, and specifically FontAwesome. I am loading the file using this code:
webViewer.NavigateToString(song.RenderHtml(appSettings));
And the RenderHtml() function looks partially like this:
string content = #"<DOCTYPE html>
<html>
<head>
<base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
<link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
<style type=""text/css"">
body { font-family: Tahoma, Geneva, sans-serif;
margin: 15px;
font-size: " + settings.Values["settingsFontSize"] + #"pt; }
span.flat { margin: -4px -2px;
font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 1.2em;
height: 0.9em;
display: inline-block; }
h3 { font-size: 1.5em; }
th a { text-decoration: none;
font-weight: bold;
color: #127690; }
td a { text-decoration: none;
font-weight: normal;
color: #000; }
i { color: #000;
width: 1em; }
</style>
</head>
<body>";
// Rest of rendering function.
However I cannot seem to get FontAwesome to load properly. As far as I can tell the font-awesome.min.css is loading properly, because the icons' i tags are the right size (square blocks) but they are blank, meaning the font file is not being loaded. I tried using the <base> tag but that does not seem to work. Is there any way to make this work?
Edit: I edited the stylesheet and hardcoded the full url of the font file into it, and it still doesn't work.
It seems that you may need to use the BuildLocalStreamUri / NavigateToLocalStreamUri. In this case, the string-passed html can't refer the contents of css folder. You need to build the 'stream' that contains string, css, or other external files.
Following is an api reference:
BuildLocalStreamUri
You may need to refere the sample also. It's complicated to use.
XAML WebView control sample
I am new to web design and development and have been playing around with different styling techniques. During the course of my research, I came across icon fonts. Though I have investigated a number of tutorials and videos, I have been unable to successfully make use of icon fonts despite many hours of effort.
To start, I went to a site that offers a large number of icon fonts, chose the ones I liked, generated them and finally downloaded them into a folder. But now that these icon fonts are in a folder, what should I do?
Here is a step by step guide:
Go to Font Squirrel and download the #font-face kit. Unzip it, rename it to 'fonts', and put it in the same directory as your html file.
Use this as your html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#font-face {
font-family: 'ModernPictogramsNormal';
src: url('fonts/modernpics-webfont.eot');
src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/modernpics-webfont.woff') format('woff'),
url('fonts/modernpics-webfont.ttf') format('truetype'),
url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}
li {
list-style-type: none;
}
[data-icon]:before {
font-family: 'ModernPictogramsNormal';
content: attr(data-icon);
speak: none;
padding:0 5px;
}
</style>
</head>
<body>
<ul>
<li data-icon="^">RSS</li>
<li data-icon="*">Star</li>
<li data-icon=".">Shopping Cart</li>
</ul>
</body>
</html>
You should see this:
You're rolling!
In addition, to know what character to use, check out the Character Map on the Font Squirrel site.