Font Awesome not working, 사각형으로 표시되는 아이콘
마케팅 페이지의 프로토 타입을 제작하려고하는데 Bootstrap과 새로운 Font Awesome 파일을 사용하고 있습니다. 문제는 아이콘을 사용하려고 할 때 페이지에 렌더링되는 모든 것이 큰 사각형이라는 것입니다.
헤드에 파일을 포함시키는 방법은 다음과 같습니다.
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
</head>
다음은 아이콘을 사용하려는 예입니다.
<i class="icon-camera-retro"></i>
그러나 모든 것이 큰 사각형으로 렌더링됩니다. 아무도 무슨 일이 일어나고 있는지 알고 있습니까?
설명서 (3 단계) 에 따르면 제공된 CSS 파일을 수정하여 사이트의 글꼴 위치를 가리켜 야합니다.
당신은이 클래스는 있어야합니다 fa클래스와 클래스를 그 식별 원하는 아이콘 fa-twitter, fa-search, 등 ...
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
이것을 사용하십시오
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Amazon Cloudfront CDN과 비슷한 문제가 있었지만 maxcdn에서로드를 시작한 후에 해결되었습니다.
이것은 도움이 될 수 있습니다 실수로 폰트 패밀리를 변경하지 않았 음을 확인하기 위해 확인 아이콘. .fa 항목의 글꼴 패밀리를 FontAwesome에서 변경 한 경우 아이콘이 표시되지 않습니다. 항상 바보 같은 작은 것입니다.
누군가에게 도움이되기를 바랍니다.
LESS 또는 SASS를 사용하는 경우 font-awesome.less / sass 파일을 열고 @fa-font-path: "../font";실제 글꼴을 가리키는 경로 변수 를 편집하십시오 .
@fa-font-path: "../font";
@font-face {
font-family: 'FontAwesome';
src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
@ font-face 선언 블록에서 경로를 편집한다는 점을 제외하면 CSS와 동일합니다.
@font-face {
font-family: 'FontAwesome';
src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
font-awesome.css를 열고 다음과 같은 코드를 작성하십시오.
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
다음과 같은 폴더가 있어야합니다.
font awesome -> css
-> fonts
또는 가장 쉬운 방법 :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
몇 가지 이전 솔루션으로 동일한 문제를 해결하려고 시도했지만 내 상황에서는 작동하지 않았습니다. 마지막으로 HEAD 에이 두 줄을 추가하고 작동했습니다.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
i am using Font Awesome 4.3.0 just linking from maxcdn works as mentioned here,
but to host in your server putting fonts and css in same folder worked for me, like this
then just link the css:
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
hope helps someone.
I had this issue. The problem was I had a font-family CSS style with !important overriding the fontawesome font.
In case you are working with Maven and Apache Wicket also check for the following in order to try to resolve the issue with Font-Awesome and icons not being loaded:
If you have placed your files for example in the following file structure
/src
/main
/java
/your
/package
/css
font-awesome.css
/font
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.svgz
fontawesome-webfont.ttf
fontawesome-webfont.woff
Check 1) Are you correctly using a Package Resource Guard in order to allow to load the font files correctly?
Example from your class which extends WebApplication:
@Override
public void init() {
super.init();
get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());
}
Check 2) After you have made sure that all fonts are correctly transferred to the Web Browser, check for what has been actually transferred to the Web Browser, i.e., did the integrity of the font files change? Compare the files in your source directory and the files transferred to the Web Browser using, e.g., the Web Developer Toolbar of Firefox and DiffDog (for file comparison).
In particular if you are using Maven be aware of resource filtering. Do not filter the folder where your /font files are contained - otherwise they will be corrupted.
Example from your pom.xml
<build>
<finalName>Your project</finalName>
<resources>
<resource>
<filtering>true</filtering>
<directory>src/main/resources</directory>
</resource>
<resource>
<filtering>false</filtering>
<directory>src/main/java</directory>
<includes>
<include>**</include>
</includes>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
</resource>
</resources>
</build>
In the example above we do not filter the folder src/main/java, where the css and font files are contained.
For further information on the filtering of binary data please also see the documentation:
http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html
In particular the documentation warns: "Warning: Do not filter files with binary content like images! This will most likely result in corrupt output. If you have both text files and binary files as resources, you need to declare two mutually exclusive resource sets. The first resource set defines the files to be filtered and the other resource set defines the files to copy unaltered..."
You must have 2 classes, the fas class and the fa class, maybe this will work:
// Wrong
<i class="fas fa-search"></i>
// Correct
<i class="fa fa-search"></i>
I had this issue and went through each step carefully...even though I've been using FA for ages...and then I realized I had this line in my mail css file:
* {
font-family: Arial !important;
}
Silly mistake, but this could tip off someone in future!
This should be much simpler in the new version 3.0. Easiest is to point to the Bootstrap CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome
As of Dec 2018, I find it easier to use the stable version 4.7.0 hosted on bootstrapcdn instead of the font-awesome 5.x.x cdn on their website -- since every time they upgrade minor versions the previous version WILL break.
<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Icons are the same:
<i class="fa fa-facebook"></i>
If your server is IIS, be sure to add the correct MIME to serve .woff file extension. The correct MIME is application/octet-stream
You must return the header Access-Control-Allow-Origin to * for your fonts files
It could be possible that your font path is not correct so that css not able to load the font and render the icons so you need to provide the stranded path of attached fonts.
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
Use this <i class="fa fa-camera-retro" ></i> you have not defined fa classes
font-weight: 900;
I had a different issue with Font Awesome 5. Default font-weight should be 900 for FontAwesome icons but I overwrote it to 400 for span and i tags. It just worked, when I corrected it.
Here is the issue reference in their Github page, https://github.com/FortAwesome/Font-Awesome/issues/11946
I hope it will help someone.
I have changed from 3.2.1 to 4.0.1 and the folder was font and now is called fonts.
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');
I hope it help someone.
I use the Official Font Awesome SASS Ruby Gem and fixed the error by adding the below line to my application.css.scss
@import "font-awesome-sprockets";
Explanation:
The font-awesome-sprockets file includes the sprockets assest helper Sass functions used for finding the proper path to the font file.
if your using sass and have imported in your main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';
The error may come from the font-awesome.scss file that is looking for the font files in it's relative path.
So remember to override the $fa-font-path variable: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;
like this there is no need to add the cdn in your index.html
Double check the fontawesome-all.css file - at the very bottom there will be a path to the webfonts folder. Mine had "../webfonts" format in it, which meant that the css file would be looking 1 level up from where it is. As all of my css files were in css folder and I added the fonts to the same folder, this was not working.
Just move your fonts folder up a level and all should be well :)
Tested with Font Awesome 5.0
Starting in version 5, if you downloaded the package from this site:
https://fontawesome.com/download
The fonts are in the all.css and all.min.css file.
This is what your reference would look like using the latest version now (replace with your folder):
<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
Using absolute instead of relative paths solved it for me. I was using relative paths (see first example below) and that didn't work. I checked via console and found the server was returning a 404, files not found.
Relative path caused a 404:
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}
Absolute path solved it cross browser:
@font-face {
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}
I wouldn't recommend doing this unless you have to, but it works for me. Ofcourse, you should repeat this for all the font formats in the font-awesome.css file.
It wasn't working for me because I had Allow from none directive for the root directory in my apache config. Here's how I got it to work...
My directory structure:
root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html
where my index.html has:
<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">
I chose to continue to disallow access to my root and instead added another directory entry in my apache config for root/font-awesome/
<Directory "/path/root/font-awesome/">
Allow from all
</Directory>
My problem was with adding the
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
inside a
<!-- build:css assets/styles/main.css -->
<!-- endbuild -->
tag
I fixed it by placing it outside the tag.
What fixed the issue for me (on my Windows 7 machine) was decrypting my project directory. It's crazy how many visual and functional glitches originally arise from that when testing your website. Just get to a command prompt and run:
attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%
...where %PROJECT_PATH% is the full pathname to the directory where your code is stored.
Now in fontawesome 5 you can deliver a cached version of JS over Https.
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
More info on https://fontawesome.com/get-started/svg-with-js
Use with the upper class
<div class="container">
<i class="fa fa-facebook"></i>
</div>
참고URL : https://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares
'IT story' 카테고리의 다른 글
| Pandas에 열이 있는지 확인하는 방법 (0) | 2020.05.07 |
|---|---|
| Vim 전문가가 왜 탭보다 버퍼를 선호합니까? (0) | 2020.05.07 |
| 도커 컨테이너 내에서 크론 작업을 실행하는 방법은 무엇입니까? (0) | 2020.05.07 |
| 시간 지연으로 작업을 반복 하시겠습니까? (0) | 2020.05.07 |
| 현재 메뉴 항목을 강조 표시하는 방법 (0) | 2020.05.07 |