멋진 글꼴이 아이콘을 표시하지 않습니다.
Font Awesome을 사용하고 있으며 HTTP로 CSS를 추가하고 싶지 않습니다. Font Awesome을 다운로드하여 코드에 포함했지만 Font Awesome에 아이콘 대신 테두리가있는 사각형 상자가 표시됩니다. 내 코드는 다음과 같습니다.
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>
테두리가있는 사각형 상자 대신 아이콘을 표시하는 방법을 알고 싶습니다.
제 경우에는 CSS 코드에서 다음과 같은 실수를했습니다.
*{
font-family: 'Open Sans', sans-serif !important;
}
이것은 전체 페이지에 대한 모든 글꼴 모음 규칙을 재정의합니다. 내 해결책은 코드를 이렇게 본문으로 옮기는 것이 었습니다.
body{
font-family: 'Open Sans', sans-serif;
}
주의 : !importantcss 에서 플래그 를 사용할 때마다 동일한 요소에서 동일한 유형으로 선언 된 다른 CSS 규칙이 재정의됩니다.
열면 font-awesome.min.css다음 경로를 볼 수 있습니다.
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...
즉, 디렉터리 Fonts를 만든 다음 파일 fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot)을이 폴더에 복사 해야합니다. 그 후에 모든 것이 잘 작동합니다.
멋진 글꼴의 새 버전 (5) 은 접두사 대신 "fas"또는 "fab"사용 "fa"합니다.
웹 사이트에서 인용 :
fa 접두사는 버전 5에서 더 이상 사용되지 않습니다. 새로운 기본값은 fas 솔리드 스타일과 브랜드의 fab 스타일입니다.
이것이 내 글꼴이 빈 사각형으로 표시되는 이유입니다. 이제 수정되었습니다.
예제 코드 :
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>
참조 : https://fontawesome.com/icons/facebook-f?style=brands
먼저 class = "fa"와 아이콘의 클래스가 무엇인지 확인하십시오. 그래서,
<i class="fa-pencil" title="Edit"></i>
그러나 또한
<i class="fa fa-pencil" title="Edit"></i>
그런 다음 예상대로 작동합니다. 이것은 내 문제를 해결했습니다.
다음과 같은 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">
CSS파일 경로 가 올바른지 확인하십시오. 절대 링크를 선호하는 것보다 우리가 시작하는 위치를 알고 있고 검색 엔진이 상대 링크보다 선호하기 때문에 이해하기 더 쉽습니다. 대역폭을 줄이려면 글꼴 멋진 서버의 링크를 사용하십시오.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
또한이를 사용하면 추가 글꼴을 서버에 업로드 할 필요가 없으며 올바른 CSS파일 을 가리 키도록 할 수 있으며 최신 업데이트를 즉시 활용할 수도 있습니다.
처음에는 font-awesome.css 및 font-awesome.min.css
일반적으로 font-awesome.css개발 중에 사용 font-awesome.min.css하고 사이트에 만족하면 로 전환 하십시오.
이와 같은 문제는 종종 상대 경로 및 위치로 인해 발생하므로 CSS와 관련하여 html 파일이 어디에 있는지 확인하십시오.
html 파일이 기본 디렉토리에 있고 css가 루트 외부의 하위 폴더에있는 경우 다음이 필요합니다. href="./css/font-awesome.css"(단일 마침표)
위의 모든 내용이 정확하지만 내 문제는 다음이없는 FA5 무료 버전을 다운로드했다는 것입니다.
font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')
v5가 작동하지 않아 위의 게시물을 통해 4.7.0으로 되 돌렸고 문제가 해결되었습니다.
이 페이지에 설명 된대로 CDN과 javascript include를 사용하여 Font Awesome을 성공적으로 설치했습니다 . 그런 다음 HTML과 CSS를 일부 레거시 페이지에 복사하려고했는데 갑자기 아이콘 대신 빈 사각형 상자가 보였습니다.
나는 Daniel의 대답 (위)을 보았고 내 레거시 CSS 파일이 거대하고 오래 되었기 때문에 그것이 문제라고 생각했습니다. 그러나 Chrome DevTools를 살펴보면 Font Awesome이로드 된 것처럼 보였습니다.
문제가 있으면 글꼴이 취소 선으로 표시 될 것으로 예상했지만 ...하지만 모든 옵션을 다 다 써 버렸기 때문에 Computed Styles를 확인하고 Font Awesome 글꼴이 확실히 사용되지 않는 것을 분명히 알았습니다. (하단의 Rendered 글꼴 참조)
내 레거시 CSS 파일은 엉망이었고 만지지 않기를 원했기 때문에이 작업을 통해 속임수를 썼습니다. 아무에게도 말하지 마십시오. :)
<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>
또한 Font Awesome 버전 4.7.0에서 버전 5.4.1로 업그레이드했을 때이 문제가 사라졌습니다! 내가 사용 이 설정 가이드 이 HTML을
<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
SCSS 및 NPM 패키지를 사용하는 사람들을 위해 내 솔루션은 다음과 같습니다.
npm i --save @fortawesome/fontawesome-free
그런 다음 SCSS 파일의 맨 위에서 (이상적으로는 애플리케이션의 루트에서 가져온 SCSS 파일) :
@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
In my case: You need to copy the whole font-awesome folder to your project css folder and not just the font-awesome.min.css file.
i was dealing with the same problem then i figured it out i have to use new version (5 and plus)
use this cdn it will work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
You may have used a VCS (git or somesuch) to transfer icon files to the server. git says:
warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.
You probably have to fix your fonts.
I think you have not fonts folder in your root folder like where stay css folder.
Demo
And css folder is like
And fonts folder like
I hope it will work for you.
Thanks you.
In font-awesome-4.x adding fonts folder to your web app folders.
On MacOS Mojave, I had this problem in Safari. The font-awesome images worked in Chrome but not in Safari, so I was sure it wasn't the site.
I got them to render by going to Preferences in the Safari menu, and disabling/unchecking "Prevent cross-site tracking" under the Privacy tab.
Not sure why this fixed it, but it did.
So it seems adding style='font-weight:normal;' or otherwise changing the font directly on the element overrides the .fas{font-weight:900} definition in Font Awesome's CSS file. I guess the font has specific defines within the font file that it works with. It seems the font-weight must be set between 501 and 1000, or the font may look like a square block.
Based on the 5.10.1 version.
My solution (locally):
If you're using "fontawesome.css" or "fontawesome.min.css", try using "all.css" instead (located in the css folder).
The "css" folder and the "webfonts" folder from the fontawesome package that you downloaded must be in the same level as each other.
In my case, I already had a css folder so I just renamed the fontawesome css folder to "css-fa".
With both "css-fa" and "webfonts" in my css folder, simply link it correctly in your text editor and it should work.
Ex: link rel="stylesheet" href="css/css-fa/all.css"
You needed to close your `<link />`
As you can see in your <head></head> tag. This will solve your problem
<head>
<link rel="stylesheet" href="../css/font-awesome.css" />
<link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>
Watch out for Bootstrap! Bootstrap will override .fa classes. If you're bringing in both packages separately thinking "I'll use Bootstrap for responsive block handling and Font-Awesome for icons", you need to address the .fa classes inside Bootstrap so they don't interfere with Font-Awesome's stand-alone implementation.
예 : Bootstrap의 font-family 'FontAwesome'은 Font-Awesome의 font-family 'Font Awesome 5 Free'를 방해하고 원하는 아이콘 대신 흰색 상자를 얻게됩니다.
이 문제를보다 깔끔하게 처리 할 수있는 방법이있을 수 있지만, "화이트 박스"문제를 해결하기 위해 체크리스트를 작성했지만 여전히 파악할 수없는 경우 (예 : 제가 한 것처럼) 이것이 귀하가 찾고있는 답일 수 있습니다. 에 대한.
참고 URL : https://stackoverflow.com/questions/26867795/font-awesome-is-not-showing-icon
'Development Tip' 카테고리의 다른 글
| Doctrine 2 엔터티에서 변경 / 업데이트 된 모든 필드를 가져 오는 기본 제공 방법이 있습니까? (0) | 2020.10.15 |
|---|---|
| LAN을 통해 Visual Studio 디버깅 IIS Express 서버에 연결 (0) | 2020.10.15 |
| node-sass (Ruby 없음)를 사용하여 sass / scss를 css로 컴파일하거나 변환하는 방법은 무엇입니까? (0) | 2020.10.15 |
| CSS에서 maxlength를 지정할 수 있습니까? (0) | 2020.10.15 |
| CSS : 하나의 요소를 가리키면 여러 요소에 효과가 있습니까? (0) | 2020.10.15 |