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-family: Raleway}그것을 변경했습니다*.not(i) {font-family: Raleway}
열면 font-awesome.min.css다음 경로를 볼 수 있습니다.
'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...즉, 디렉터리 Fonts를 만든 다음 파일 fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot)을이 폴더에 복사 해야합니다. 그 후에 모든 것이 잘 작동합니다.
summernote글꼴 폴더에는 배포해야하는 확장자 eot가 ttf, 및 인 3 개의 파일 woff이 있습니다.
fonts아닙니다 Fonts.
멋진 글꼴의 새 버전 (5) 은 접두사 대신 "fas"또는 "fab"사용 "fa"합니다.
웹 사이트에서 인용 :
fa 접두사는 버전 5에서 더 이상 사용되지 않습니다. 새로운 기본값은 fas 솔리드 스타일과 브랜드의 팹 스타일입니다.
이것이 내 글꼴이 빈 사각형으로 표시되는 이유입니다. 이제 수정되었습니다.
예제 코드 :
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>먼저 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파일 을 가리킬 수 있으며 최신 업데이트를 즉시 활용할 수 있습니다.
위의 모든 내용이 정확하지만 내 문제는 다음이없는 FA5 무료 버전을 다운로드했다는 것입니다.
font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')v5가 작동하지 않아 위의 게시물을 통해 4.7.0으로 되 돌렸고 문제가 해결되었습니다.
나는 같은 문제에 직면하고 있었다. 그래서 굉장한 글꼴을 다운로드하는 대신에, 나는 내 html 코드에 링크를 추가했고 그것은 작동했다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>이 페이지에 설명 된대로 CDN과 javascript include를 사용하여 Font Awesome을 성공적으로 설치했습니다 . 그런 다음 HTML과 CSS를 일부 레거시 페이지에 복사하려고했는데 갑자기 아이콘 대신 빈 사각형 상자가 보였습니다.
나는 Daniel의 대답 (위)을 보았고 내 레거시 CSS 파일이 거대하고 오래 되었기 때문에 그것이 문제라고 생각했습니다. 그러나 Chrome DevTools를 살펴보면 Font Awesome이로드 된 것처럼 보였습니다.
문제가 생기면 글꼴이 취소 선으로 표시 될 것으로 예상하고 있었는데 ...하지만 모든 옵션을 다 다 써 버렸기 때문에 계산 된 스타일을 확인하고 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';@fortawesome/fontawesome-free/css/all.css수정
VCS (git 또는 일부)를 사용하여 아이콘 파일을 서버로 전송했을 수 있습니다. 자식 말한다 :
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.글꼴을 수정해야 할 것입니다.
5.10.1 버전을 기반으로합니다.
내 솔루션 (로컬) :
"fontawesome.css"또는 "fontawesome.min.css"를 사용하는 경우 대신 "all.css"를 사용해보십시오 (css 폴더에 있음).
다운로드 한 fontawesome 패키지의 "css"폴더와 "webfonts"폴더는 서로 같은 레벨에 있어야합니다.
제 경우에는 이미 css 폴더가 있으므로 fontawesome css 폴더의 이름을 "css-fa"로 변경했습니다.
내 css 폴더에 "css-fa"와 "webfonts"가 모두 있으면 텍스트 편집기에서 올바르게 연결하기 만하면 작동합니다.
예 : link rel = "stylesheet"href = "css / css-fa / all.css"
이 튜토리얼을 따라 Font Awesome Pro 5.13을 직접 호스팅했습니다.
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
어떤 이유에서인지 <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">로드 할 수 없었고 webfonts결과적으로 사각형 만 표시되었습니다. 그러나 내가 사용했을 때 <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>모든 것이 작동하기 시작했습니다. 두 링크 모두 HTML로 추가되었습니다 <head>.
css 폴더에 글꼴 멋진 파일을 넣고 변경해야합니다.
href = "../ css / font-awesome.css"에서 href = "css / font-awesome.css"로
한 가지 더이 글꼴 멋진 CSS 파일을 교체하고이 파일을 사용해보세요.
.social-media{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.social-media li .fa{
background: #fff;
color: #262626;
width: 50px;
height: 50px;
border-radius: 50%;
text-align:center;
line-height:50px;
}
.social-media .fa:hover {
box-shadow: 5px 5px 5px #000;
}
.social-media .fa.fa-twitter:hover{
background:#55acee;
color:#fff;
}
.social-media .fa.fa-facebook:hover{
background:#3b5998;
color:#fff;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul class="social-media">
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-facebook fa-2x"></i></li>
</ul><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>부트 스트랩을 조심하세요! 부트 스트랩은 .fa 클래스를 재정의합니다. "반응 형 블록 처리에는 Bootstrap을 사용하고 아이콘에는 Font-Awesome을 사용하겠습니다"라고 두 패키지를 별도로 가져 오는 경우, Font-Awesome의 스탠드를 방해하지 않도록 Bootstrap 내의 .fa 클래스를 처리해야합니다. 혼자 구현.
예 : Bootstrap의 font-family 'FontAwesome'은 Font-Awesome의 font-family 'Font Awesome 5 Free'를 방해하고 원하는 아이콘 대신 흰색 상자를 얻게됩니다.
이 문제를보다 깔끔하게 처리 할 수있는 방법이있을 수 있지만 "화이트 박스"문제를 해결하기 위해 체크리스트를 작성했지만 여전히 파악할 수없는 경우 (예 : 제가 한 것처럼) 이것이 귀하가 찾고있는 답일 수 있습니다. 에 대한.
제 경우 far에는 무료 세트에 포함되지 않은 일부 일반 스타일 ( )을 사용하여 문제가 발생했습니다 . fas수정하도록 변경 했습니다.