Font awesome css placed in prototype/css/views/. Font files is in prototype/css/views/fonts folder. Also I have declared <link rel="stylesheet" href="css/views/font-awesome.min.css"/>. I have <i class="fa fa-arrow-right fa-4x"></i>.
I can access them by directly typing their url in Chrome. For some reason it is not loaded and [] is displayed. How to fix it?
UPDATE:
It starts to work when I replace <link rel="stylesheet" href="css/views/font-awesome.min.css"/>
with <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
But I need css and font to be placed on my site...
You probably need the relative path from your CSS file to the font file (not from HTML to font). Also think you need to update the css file to have the correct path to the font file.
Try href="/prototype/css/views/font-awesome.min.css"
And in font-awesome.min.css edit the paths to fonts/FONT.EXT
Related
I've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
So I've been slowly trudging my way through a responsive eBay listing template using Bootstrap, it took some trial and error but I seem to have nailed everything down except the ability to use font-awesome in the listing.
The first attempt at a solution was to point to the font-awesome cdn for the css file which is supposed to include the necessary information to embed the font, but it did not work.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
I read somewhere else where the link had http: in front, so I tried that, it also didn't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Then I tried to point it all directly to my own server. So I put a full path to the css file on my server:
<link rel="stylesheet" href="http://www.lqskins.com/ebay/font-awesome/css/font-awesome.min.css">
Then I edited the css file directly in order to put the correct path to the font files themselves in the css file, example:
src:url('http://www.lqskins.com/ebay/font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0')
None of these solutions have worked. If I pull up my test template on the server that points to the same css file, they work fine there. Is there a way to load font-awesome for use within an ebay listing, or is crippled beyond workability?
I am having no issues with this. The following code correctly displays a cog in my ebay listing.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-cogs"></i>
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).
Here is my structure within the root folder: css/fonts/ and books/book1.html
Within the css folder I have a stylesheet which has a link to the fonts folder like: src: url('/font/fontName.ttf');
In the books folder, I link the stylesheet through: <link rel="stylesheet" href="../css/stylesheet.css" type="text/css" charset="utf-8">
I have a:
body { color: red } in the stylesheet and all the color was effected as intended. However, for some reason the fonts were not loaded. When I moved the book1.html outside the books folder, and changed the stylesheet link to : <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8">
Can someone please help ?
If you change the following:
url('/font/fontName.ttf');
To:
url('/css/fonts/fontName.ttf');
It will work no matter where your css file is in the directory structure.
It's hard to fully understand your file/folder structure from your image, but does this work in your css?
src: url('./font/fontName.ttf');
(I added a dot before your forward slash)