I'm using ruby on rails version 5.0.0, and I'm using c9.io. I'm not that sure how to use Google fonts and where I would put the embed font code:
<link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet">
I know that I have to put font-family: 'Delius', cursive; in the css file, but if I do that without doing the previous, the only font it uses is Comic Sans.
I learned the answer but I'd still like to know which folder would you put it in?
You can import it wih CSS - Place this at the top of your css file:
#import url('https://fonts.googleapis.com/css?family=Delius');
I figured it out. You put <link href="https://fonts.googleapis.com/css?family=Delius" rel="stylesheet"> in the application.html.erb file.
Related
I want to know, how can I use the font awesome's offline icons with :before or :after pseudo in CSS?
If I use CDN instead of offline then it Works perfectly but not with offline files.
.mydiv::before {
content: "\25AE";
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
How to set it up depends on your solution. Are you using simple CSS or any CSS preprocessors?
Let's assume you are using simple CSS:
Download and extract the package
Copy two folders: /webfonts and /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets).
Link it in the head tag of every HTML page that you need
like this:
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
</head>
For more info, take a look at the official guide on how to host it by yourself: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Download required file from Font Awesome website
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Create a new folder /fonts/
Unzip the download into this folder.
Then add <link href="fonts/css/all.css" rel="stylesheet"> in the <head> section.
It is easy to use them in your webpage, for examples see https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Im trying to install font awesome to my simple sass project i have.
1 simple html page linking to 1 css file that is spit out via my sass.
Is there anyway of installing it locally to that project folder?
I couldnt see anything on the website
http://fontawesome.io/get-started/
You have to link it through ruby rails.
Ive managed to import font awesome but the icon just shows up as a box so i think its looking for the missing svg.
Try to this:
Go to this site: http://fontawesome.io/get-started/
and Click no Download Folder.
Add font-awesome.css stylesheet in your head tag &
Add font folder also, Please give font path proper in the font-awesome.css stylesheet.
<head>
<link rel="stylesheet" href="[http://fontawesome.io/assets/font-awesome/css/font-awesome.css][1]"/>
</head>
I have installed google font roboto on my machine, I am also including
<link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesheet' type='text/css'>
in tag of my welcome.html file .
and in css file I am using css like
.mycss{
font-family: "robotoregular","sans-serif","arial";
font-size: 13px;
}
Its working fine in development mode, but when I deploy it on tomcat font size is 2-3px large than development mode. I don't know why its coming. can somebody help me to get out of this? Also how to import Google font in gwt.
Thanks,
First of all, it should be:
font-family: "Roboto", sans-serif;
You can include Google font in your GWT html file the same way as you did for your welcome.html. This is the link that Google recommends (you can choose your own font weights, of course):
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
How can I use font-awesome in css? I searched and see that I just need to download and copy font-awesome directory into my porject then display the icon by using content in css. But instead of displaying awesome icons, it displayed weird and undefinable characters. Does anyone know how to use/fix it properly?
add this in the head of your html page: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I am using Bootstraps glyphicons, including them like this:
<!-- Load Bootstrap CSS (Flatly) and Javascript -->
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Before I loaded the glyphicons CSS file my fonts were fine. I did not set the font, instead using whatever Bootstrap or jQuery sets the font by default.
Now I have included that glyphicon CSS file, my fonts have changed. Can I utilize the glyphicons whilst ignoring the fonts?
As you can see here http://www.bootply.com/5Amv5odg7X you don't need to load the glyphicons separately, just be sure to load stock Bootstrap before flatly, and you're good to go.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
Also, it's usually considered best practice load your .js files after all html content, so it doesn't impact page load.
You are using a custom version of Bootstrap css that already includes the icons and imports a custom Google font. Check the file you're linking to here:
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
This file contains all of the styles for the glyphicons embedded in it, so no need to separately add the link to the cdn for <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">.
As for you fonts "changing", the first line in this file imports the Lato font from Google and sets as the body font. If you don't want to use the custom font, download the flatly css file (instead of linking to the remote file) and remove the import statement at the top of the css file. Or, override the styles in your own css file. (Better to do the former, as it would be a waste to have your site visitors download the Google fonts, if you're not using them).