I am using the offline version of font awesome in a react project. I followed this manual to set it up. The problem i have is that the icons work on some pages but don't work on others. For example. They work on localhost/courses but don't work on localhost/courses/1. Or they work on localhost/authors but don't work on localhost/authors/1. I hope you see the pattern. How do i go about resolving this problem? Here is how i implemented my current solution.
I downloaded the offline bundle which contains several folders. Then i referenced /css/all.css and /js/all.jsinside inside the <head> tag.
<head>
<link href="/folder/css/all.css" rel="stylesheet">
<script defer src="/folder/js/all.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
Let me try to answer your question
The safest way to do is by using full URL to your Font Awesome resources as follow (or other full URL if your URL is different then i provide):
<head>
<link href="//localhost/courses/folder/css/all.css" rel="stylesheet">
<script defer src="//localhost/courses/folder/js/all.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
Other solution is using code as follow (by adding ../), but you must count how long your URL structur to make it work on particular page:
<head>
<link href="../folder/css/all.css" rel="stylesheet">
<script defer src="../courses/folder/js/all.js"></script>
</head>
I hope this solution is work for you.
I solved this problem by using React's %PUBLIC_URL% which is available with react-scripts#0.5.0 and higher. You can read about it here. Here is how I am referencing the font-awesome files now, given they are inside a folder called font-awesome inside the public folder of a React project.
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/font-awesome/css/all.css">
<script defer src="%PUBLIC_URL%/font-awesome/js/all.js"></script>
Related
I am learning web using materialize and I am trying to create favorite button which has heart on it but when I am using materialize it show the word "favorite" instead of the heart
here is my code <div class="card-content">
<span class="card-title">Blueberries & coconut smoothie</span>
<a href="" class="favorite-btn btn-floating pink pulse">
<i class="material-icons">favorite</i>
</a>
</div>
and here is screenshot for what I got
You must include the material-icons google fonts CDN for it to work.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
paste the above tag in the <head> tag of your index.html and it should work fine,
also refer materialize docs for icons
I am seeing some strange behavior with the new fontAwesome 5; Some icons seem to show up just fine, and others appear as if they were bad unicode characters:
It appears to be a similar issue to This SO post, except that I am not using Ruby on Rails. Another difference here is that I tried adding a full path (rather than the relative path used) to the fonts in fontawesome-all.css, with no change.
Code:
<i class="far fa-chart-pie fa-fw" aria-hidden="true"></i> <!-- doesn't show -->
<i class="far fa-id-card fa-fw" aria-hidden="true"></i> <!-- shows -->
Reference to the css in <head>:
<link rel="stylesheet" href="/res/plugins/Font-Awesome/5.0.2/web-fonts-with-css/css/fontawesome-all.css">
I assume you don't have a pro license.
To use the regular theme for the chart-pie you need the pro license, for the regular version of the id card you don't.
<i class="far fa-id-card"></i>
<i class="fas fa-chart-pie"></i>
Just look on the official font awesome site at https://fontawesome.com/icons and then see if you can choose regular from the menu on the right. Some icons don't have this option for free. There you need to use the "fas" css class and not the "far" class.
I have a little problem with Angular2 and a CSS-Stylesheet.
I included boostrap in the index.html file of the Angular2-App.
It is no problem in the whole application...
Then I included another library (Bootstrap-switch) in the same way:
<!-- Load external Libraries / Modules -->
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- eigener Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
But now I have a little problem:
While the "normal" Bootstrap is functional over the entire application, the Bootstrap Toggle I can only use at the index.html.
If I use it there, no problem, but if I use it at any other page, the styles won´t apply...
Here is how I use the toggle-switch:
<div class="checkbox">
<label><input type="checkbox" data-toggle="toggle" value="">Passwort
speichern (Auto-Login)</label>
</div>
Can someone can help me? Thanks!
I'm following the instruction in Google's Material Icons Guide but for some reason it does not work when I tested it in JSFiddle. The icon/image of a face do not show up.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons md-48"></i>
you just need to include the link to the font and then use it:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons">face</i>
working JSFiddle example
<h1 class="h1name" style="" ><bold><%= #user %></bold><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></h1>
I don't know why I'm getting a fat glyphicon-pencil instead of the correct one as seen in the Bootstrap Components website. http://getbootstrap.com/components/#glyphicons-how-to-use
gem 'twitter-bootstrap-rails'
Is the bootstrap version I'm using on my ruby on rails project
I am using roboto for fonts
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
Another Sample with the envelope glyphicon
without the roboto font it looks like this (still very different from the desired one)
I faced the same problem, I tried by replacing the local file with cdn path. And it works.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>