I have downloaded the font-awesome library and linked it to my HTML. Here is the simplest version of my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="font-awesome.min.css">
</head>
<body>
<div id="content">
<i id="search-icon" class="fa fa-search"></i>
</div>
</body>
</html>
But, what is rendered in the browser is:
What am I missing? I need to get this working in Firefox only.
I would try to set encoding of the page first, and then check if all other files are placed in correct directories as "Copy the entire font-awesome directory into your project" in get started page says.
Firstly, when you inspect your page and click on the font-awesome.min.css file, is it linked correctly.
Secondly are the font and supporting files that come with FontAwesome sitting in the correct folder (relative to your font-awesome.min.css file)?
For example, unless you altered the CSS in the files they gave you, you need to place the /font directory that comes with FontAwesome up a directory from your CSS files.
See the following as an example of how the CSS is referencing the font files.
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Steps: Change your href to point to:
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Download the assets for FontAwesome: http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip
Move both the /css and /fonts folders directly next to your HTML file.
Related
I have a Vue application and I want use a line-awesome font. But in my App.vue that is my component I import css file fonts in this way:
#import 'assets/fonts/line-awesome/css/line-awesome.min.css';
My problem is that no errors are shown, but my fonts are not loaded in my app.
In that css file, it contains this font face:
#font-face {
font-family: "LineAwesome";
src: url("../fonts/line-awesome.eot?v=1.1.");
src: url("../fonts/line-awesome.eot??v=1.1.#iefix") format("embedded-opentype"),
url("../fonts/line-awesome.woff2?v=1.1.") format("woff2"),
url("../fonts/line-awesome.woff?v=1.1.") format("woff"),
url("../fonts/line-awesome.ttf?v=1.1.") format("truetype"),
url("../fonts/line-awesome.svg?v=1.1.#fa") format("svg");
font-weight: normal;
font-style: normal;
}
Now I don't know if my problem is because my path is wrong setted or I need a additional configuration in my app.
Some idea about how I can fix it?
Place your files under static directory and link like
#import '/staic/fonts/line-awesome/css/line-awesome.min.css';
Files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename.
Some serious issue with line-awesome css and fonts. Even I loaded using normal simple HTML site with source css and fonts (http://maxcdn.icons8.com/fonts/line-awesome/1.1/line-awesome.zip) its giving box symbol as an icon.
Sample code which I used for test source is below
<html>
<head>
<link rel="stylesheet" href="./la/css/line-awesome-font-awesome.css">
</head>
<body>
<i class="fa fa-file-word-o"></i>
</body>
</html>
Output as follows
But if you use cdn like as follows
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">
In my application I am using different fonts and the glyphen-icons of bootstrap.
To see the results in all the browsers, I have put all the neccessary font-types(woff, tft, svg,..) in the font-face.
For the bootstrap icons, I have just put the neccessary types in the font folder.
If I go localhost, everything works fine. In all the browsers, I can see the results.
But now I deployed my application (war) on a real server.
In fireFox i can still see the icons and the font, but not in Chrome and IE.
There I get the following error in console:
http://myTestServer.com/admin-UI/fonts/source-sans-pro/Source_Sans_Pro_400.woff Failed to load resource: the server responded with a status of 500 (Internal Server Error)
...
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff2
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.ttf
I don´t understand, why does it works local and not on the real server.
Does anybody know this problem?
my Css:
#font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url('../fonts/source-sans-pro/Source_Sans_Pro_300.eot');
src: url('../fonts/source-sans-pro/Source_Sans_Pro_300.eot?#iefix') format('embedded-opentype'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.woff') format('woff'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.ttf') format('truetype'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.svg#SourceSansPro') format('svg');
Thank you!
UPDATE:
the index.html before (worked only in the localhost sever of spring Boot):
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
index.html after (this works in tomcat and also in myServer)
<!-- Bootstrap Core CSS - tomcat-->
<link href="http://localhost:8080/adminUI/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Core CSS -myTestServer-->
<link href="http://myTestServer.com/adminUI/css/bootstrap.min.css" rel="stylesheet">
The main.css I also added the absolute path. My question is now, is there a way to replace the absolute path: "http://..../" with a variable.
If I use the relavtive path that would be the same problem like at the beginning.
I hope you understand what I mean.
Your fonts and style should be in same parent directory directory like this. Look at fonts and style folder and ignore other folders this is an example.
then include the bootstrap css in in your document like this.
<link rel="stylesheet" href="http://example.com/style/bootstrap.min.css">
replace example.com with your domain. bootstrap will automatically find the font file in same parent directory. this is absolute path to bootstrap css file.
I don't know how to use Glypicons Pro in simple Meteor App:
meteor create meteor-intro
cd meteor-intro
meteor (to run the app and it works fine)
meteor add bootstrap-3
copy these folders of files into meteor-intro app folder
Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\css
Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\fonts
Downloads\glyphicons_pro\glyphicons_pro\glyphicons\web\html_css\images
replace content of meteor-intro.html with the following:
<head>
<title>meteor-intro</title>
<link rel="stylesheet" href="css/style.css?v=2">
<link rel="stylesheet" href="css/glyphicons.css">
</head>
<body>
<h2>Fonts</h2>
<div class="list list-fonts c">
<strong>glass</strong><span>UTF E001</span>
<strong>server_new</strong><span>UTF E470</span>
</div>
</body>
Meteor App runs but glyphicons are not rendered. How can I get them to render??
You should place the fonts and images in your Meteor /public folder, and then change the relative path of the url in the #font-face property of the glyphicons .css file to point to their location.
So if your new relative file path from your main Meteor app folder becomes public/glyphicons_pro/glyphicons/web/html_css/fonts, change the #font-face property to correspond to the location in the public folder:
#font-face {
font-family: 'Glyphicons Regular';
src:
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.eot');
src:
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.woff') format('woff'),
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.ttf') format('truetype'),
url('/glyphicons_pro/glyphicons/web/html_css/fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
You should place the .css file in a part of your Meteor directory where it is only served on the client side.
*And also remove the links from your - the files are loaded automatically within your app once they are placed in the appropriate directories.
I've created a new (simple) website in IIS8. I've created a simple Index.html and put in jQuery, Bootstrap3 and Font-Awesome 4.0.0 to start playing with.
However my Font-Awesome icons show up as nothing (squares):
My folder structure is
/
- Index.html
- bootstrap.css
- bootstrap.js
- jquery-2.0.3.js
/css
- font-awesome.css
/fonts
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="slate.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
</head>
<body>
<div class="container">
<h1>This is a test</h1>
<h1>User Icon: <span class="fa-user"></span></h1>
</div>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</body>
</html>
Font-Awesome #font-face is:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Chrome shows that no .woff file (or anything) is even downloaded (no 404 either)
I've tried
IE 11, Firefox, Chrome
Putting the site on a live server
Changing MIME type of .woff to
font/x-woff
application/x-font-woff
application/font-woff
font/woff
Full read permissions to the App Pool
Changing the url() of the #font-face from ../fonts/ to fonts/
Removing all other unnecessary css and js files
Full page refreshes, clearing cache
I spent hours on this (too many to admit).
The problem is this code:
<span class="fa-user"></span>
Missing another fa in the class. It should be:
<span class="fa fa-user"></span>
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
import this on your font awesome CSS.
Just had the blank square issue, but this was not the problem with my markup. I'm using wordpress with a social comments plugin which used the same id as my fa icons were located within, and the plugin css overwrote the font-family. So, if your class is correct make sure no other class is highjacking your font-family.
Make sure your i elements have this css styling:
i {
font-family: FontAwesome;
}
Ive just fixed a similar problem - icons showing as squares - with the help of Mikes answer. Turns out I had another instance of FontAwesome being loaded and this was causing issues. When I apply the font family 'FontAwesome' instead of 'Font Awesome Free 5' this fixes the issue. Specifically my problem was encountered when running the WooCommerce Product Search with Avada Theme on Wordpress.
I've got a couple fonts I'd like to use in my RoR application, but their formats are mainly .ttf and .otf, among others. How would I go about embedding these files in my Rails app? Namely, once I put them in my assets folder, what exactly is the syntax for me to embed them in my CSS and/or LESS files?
EDIT:
Here's the code I have for now:
#font-face {
font-family: Vow;
src: url('/assets/Vow.otf');
}
h1 {
font-family: Vow;
text-align: center;
}
It doesn't seem to be working for me. The output in the Rails console is something along the lines of:
ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf")
And examining the page with Firebug says:
downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065
source: http://localhost:3000/assets/Vow.otf
Checkout http://www.css3.info/preview/web-fonts-with-font-face/
Larger example, assuming they're resolved directly under the assets dir
#font-face {
font-family: 'Nokia Pure Headline';
src: url('/assets/nokiapureheadlinerg-webfont.eot');
src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
font-weight: normal;
font-style: normal;
}
Im sorry I dont know LESS
Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')
Adding a custom font to Rails application
Select font type and download
for example
go to http://www.dafont.com
select font and download font
Generate font files
go to http://www.fontsquirrel.com/
select - web font generator - select font u download(unzip file downloaded from http://www.dafont.com).
Retrieve the font files
This site will generate another zip which contain all required for that font style.
From that zip, unzip and open css, copy css into your html or css file of that
Add the font to your rails app
(How to add a custom font to Rails app?)
config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
Add it to the view:
<html lang="en">
<head>
<style>
#font-face {
font-family: 'a_sensible_armadilloregular';
src: url('/assets/para/a_sensible_armadillo-webfont.eot');
src: url('/assets/para/a_sensible_armadillo-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/para/a_sensible_armadillo-webfont.woff') format('woff'),
url('/assets/para/a_sensible_armadillo-webfont.ttf') format('truetype'),
url('/assets/para/a_sensible_armadillo-webfont.svg#a_sensible_armadilloregular') format('svg');
font-weight: normal;
font-style: normal;
}
.content p {
font-family: 'a_sensible_armadilloregular';
font-size: 42px;
}
</style>
</head>
<body>
<div class="content">
<p>sample text</p>
</div>
</body>
add a custom font to Rails application by using google fonts
for example i am using Freckle Face
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
Quick Use: Freckle Face
1. Choose the styles you want:
Impact on page load time
Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.
2. Choose the character sets you want:
Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.
Latin (latin)
Latin Extended (latin-ext)
3. Add this code to your website:
Instructions: To embed your Collection into your web page, copy the code as the first element in the of your HTML document.
<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
4. Integrate the fonts into your CSS:
The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Freckle Face', cursive;
Instructions: Add the font name to your CSS styles just as you'd do normally with any other font.
Example:
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
<head>
<meta charset='UTF-8' />
<link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="nav">
Contact <span style="word-spacing:normal; color:white; font-family: 'Freckle Face', cursive;, arial, serif; font-size:20px;"><--Click a link to see this page in action!</span>
</div>
</div>
</body>