Font Awesome 아이콘이 작동하지 않습니다. 필요한 파일을 모두 포함했습니다.
제 웹사이트에서 버전 4.1.0의 폰트 어썸 아이콘을 사용하려고 하는데 작동하지 않습니다.head내 페이지의.
저는 두 가지 방법을 사용해 보았습니다.
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a><li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
사용하고 과 같습니다.<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
다음은 전체 HTML입니다.
<head>
<meta charset="UTF-8">
<title>Retrica</title>
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style/normalize.css" rel="stylesheet" type="text/css">
<link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="style/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top-header">
<div class="container"><!-- Start Container -->
<div class="row"><!-- Start Row -->
<div class="span3"><!-- Start Span3 -->
<div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
</div><!-- End Span3 -->
<div class="span9"><!-- Start Span9 -->
<nav class="main-nav"> <!-- Start Nav -->
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
<ul class="nav-ul"> <!-- Start Unordered List -->
<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
<li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>
</ul> <!-- End Unordered List -->
</nav><!-- End Nav -->
</div><!-- End Span9 -->
</div><!-- End Row -->
</div><!-- End Container -->
</header>
<section>
<a href="#" class="btncta">Register Now</a>
</section>
</body>
폰트 어썸 아이콘이 없는 사람들을 위해, 저는 몇 가지 아이디어를 모았습니다.
CDN에 대한 다음과 같은 올바른 링크를 사용해야 합니다.
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>의 페이지가 HTTPS를은 HTTPS를 합니까? ( HTTPS를 사용하세요.)
http://와 함께https://위 링크에서).AdBlock Plus 또는 uBlock이 활성화되어 있지 않은지 다시 확인합니다.일부 아이콘을 차단하고 있을 수 있습니다.
브라우저 캐시를 재설정합니다. (Chrome에서 다시 로드 버튼을 길게 클릭하고 하드 캐시 재설정을 선택합니다.)
다음 사항을 확인합니다.
<span>또는<i>사는하요, 사용을 합니다.FontAwesome글꼴 패밀리예를 들어, 다음과 같이 하면 안 됩니다.<i class="fa-pencil" title="Edit"></i>그렇지만
<i class="fa fa-pencil" title="Edit"></i>CSS에 다음과 같은 내용이 있으면 작동하지 않습니다.
* { font-family: 'Josefin Sans', sans-serif !important; }IE8을 사용하고 있다면 HTML5 심을 사용하고 있습니까?
이것이 작동하지 않으면 Font Awesome Wiki에 추가 문제 해결 아이디어가 있습니다.
참고로 다음과 같은 내용이 있습니다.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
으로, 히특은href=
그러나 전체 html 아래에는 다음이 있습니다.
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
교체를 시도해 보셨습니까?src=와 함께href=이것이 되기 위해 당신의 전체 html에서?
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
적합: http://codepen.io/TheNathanG/pen/xbyFg
처음에는 Font Awesome 5:
<i class="fa fa-sort-down"></i>
그래서 폰트에 익숙하지 않은 제가 여기에 온 것입니다.그래서 더 자세히 살펴보니 제 문제는 버전의 문제일 뿐이라는 것을 깨달았습니다.
w3는 이 사건에서 저를 도와주었습니다.
은 폰트 어썸 5입니다.
fas접두사,는 접사, Font Awesome 4는 용두를 합니다.fa.
fas솔리드(solid)를 의미하며 일부 아이콘에는 접두사를 사용하여 지정한 일반 모드도 있습니다.far.
저는 이미 FontAwesome css 폴더에서 다음과 같은 다양한 파일을 발견했습니다.
- 전 국민 투표
- 브랜드.min.min.dll
- 폰타우섬.min.min.message
- 보통.min.m.m.m.s.m.s.m.s.
- 솔리드.min.solid.min.min.solid
그리고 그때 저는 제 실수를 깨달았습니다.제가 해야 할 일은 HTML에 적절한 css를 포함하는 것이었습니다.
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">
그런 다음 올바른 항목을 참조하십시오.
<i class="fas fa-sort-down"></i>
이 설정은 저에게 적합합니다.모든 항목이 각 유형에 동등한 것은 아니지만,이것은 작동하지 않습니다.
<i class="far fa-sort-down"></i>
참고로, 모든 개별 파일을 참조하지 않으려는 경우에는 이 정도면 충분합니다.
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
비슷한 문제가 발생했습니다. 사각형에 아이콘 표시, 여기에 지정된 지침에 따라 시도했습니다. https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
html 페이지의 헤드 섹션에서 이 참조를 사용하여 해결되었습니다.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
제 것은 제가 사용하던 FA 버전에 공개되지 않은 아이콘을 원해서 작동하지 않았습니다.
이것은 일부 아이콘은 표시되지만 다른 아이콘은 표시되지 않는 이유를 나타냅니다.
꽤 분명하지만 몇몇 사람들은 여전히 이것에 속아넘어가는 것 같습니다.나처럼.
폰타썸 업데이트와 관련하여 위 답변에 몇 가지 정보를 추가하는 것뿐입니다.
폰트 awesome 5를 사용하면,
아래 HTML을 복사해서 붙여넣기만 하면 됩니다.
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
참고: 모든 스크립트를 에 포함하는 것이 좋습니다.<body> {YOUR_SCRIPT_HERE}</body>(YOUR_CLOSING_BODY에 (YOUR_CLOSING_BODY)
그리고 예를 들면,
<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
maxcdn.bootstrapcdn.com 에는 https를 사용해야 합니다.maxcdn의 https만 CORS를 지원합니다.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
저는 폰트 디렉터리를 제 CSS 파일과 동일한 수준으로 배치하여 이 문제를 해결했습니다.
메모들
이 답변은 폰타우섬의 최신 버전이 v5.*이지만 yarn과 npm 버전이 v4.*(21.06.2019)를 가리킬 때 생성됩니다.즉, 패키지 관리자를 통해 설치된 버전이 최신 버전보다 뒤에 있습니다!
를 font-awesome패키지 관리자(syslog 또는 npm)를 통해 설치된 버전을 확인하십시오.또는 이미 설치한 경우font-awesome오래 전에 어떤 버전이 설치되었는지 확인합니다.
새 종속성으로 글꼴을 설치하는 중:
$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.
이미 설치된 폰트 어썸 버전 확인 중:
$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.
문제
를 한 후font-awesome이 두 중 , 은이당개소스파일중통다합니합하나를의두신ate를 통합하는 것입니다.font-awesome.css또는font-awesome.min.css(( )에서node_modules/font-awesome/css/예를 들어 웹 페이지의 머리글로 이동합니다.
<head>
<link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>
다음으로, 당신은 https://fontawesome.com/ 을 방문합니다.사용자는 무료 아이콘을 선택하고 로그인 아이콘을 검색합니다(예).예를 들어 아이콘을 복사합니다.<i class="fas fa-sign-in-alt"></i>당신은 그것을 당신의 html에 붙여넣고, 아이콘은 표시되지 않거나 사각형 또는 직사각형으로 표시됩니다!
해결책
기본적으로 패키지 관리자를 통해 설치된 버전은 https://fontawesome.com/ 웹 사이트에 표시된 버전보다 뒤에 있습니다.보다시피 설치한 것처럼font-awesome v4.7.0그러나, 웹사이트는 다음을 위한 설명서를 보여줍니다.font-awesome v5.*솔루션, 아이콘을 문서화하는 웹 사이트 방문v4.7.0 https://fontawesome.com/v4.7.0, 해당 아이콘을 복사합니다.<i class="fa fa-sign-in" aria-hidden="true"></i>HTML에 통합할 수 있습니다.
버전 5의 경우:
이 사이트에서 무료 패키지를 다운로드한 경우:
https://fontawesome.com/download
글꼴은 all.css 및 all.min.css 파일에 있습니다.
따라서 참조 내용은 다음과 같습니다.
<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
fontawesome.css 파일에 글꼴 참조가 포함되어 있지 않습니다.
2018년에 이것을 확인할 수 있는 사람에게.저는 폰트 어썸 4.7.0을 사용하고 있으며, 이 문제는 간단히 제거함으로써 해결되었습니다.s에fas규약에서 보는 바와 같이<i class="fa fa-[icon-name]"></i>이것은 원래.<i class="fas fa-[icon-name]"></i>.
이게 도움이 되길 바랍니다.
이것이 나에게 효과가 있었다는 것을 덧붙입니다.
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
완전한 예는 다음과 같습니다.
<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>사용자 지정 CSS를 정의하는 경우 설정해야 합니다.font-weight: 900;일부 최신 Font Awesome 라이브러리(버전 5부터)용입니다.이 글꼴 두께를 설정하지 않으면 사각형이 표시될 수 있습니다.
블로거 호스팅을 사용하는 경우 다음 URL 스타일시트 CSS를 사용합니다.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
아래 두 개의 링크를 머리글 태그에 보관해 보세요.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
아래 링크에서 아이콘 가져오기:
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
사용자:
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>
및 스타일:
.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
당신이 게시한 CDN 링크가 제대로 표시되지 않은 이유일 것입니다. 아래 링크를 사용하면 됩니다. 저에게 완벽하게 작동합니다.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">당신은 이것을 멋진 폰트의 디렉토리에 있는 .htaccess 파일에 추가할 수 있습니다.
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
제가 테스트를 해봤는데 작동하고 있어요.
이것 대신에
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
HTTPS와 함께 사용
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
다음 링크 사용:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />
Angular의 최신 버전을 사용하는 경우 npm/yarn으로 패키지를 설치하는 것만으로는 충분하지 않습니다.또한 CSS 파일을 가져와야 합니다.@import "~bootstrap-icons/font/bootstrap-icons.css";).scss 스타일로 표시합니다.
렐랜드 유형을 .rel="stylesheet" type='text/css'Awesomefont CSS 파일에있습다니크링.이것들이 없으면 파일이 제대로 로드되지 않았습니다.
글꼴 가져오기 도구가 필요합니다. | 시도
<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
나는 메인 폰트-aewesome.css 파일을 편집하여 내 것을 작업하게 되었습니다.src에 대한 URL이 있습니다(woff, eot 등). 저는 그것들을 절대 경로로 변경해야 했습니다. http://mywebsite.com/font-awesome.woff 그러면 작동했습니다!
변경 내용:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
대상:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
나는 당신이 필요하다고 믿습니다.http:그렇지 않으면 어떤 프로토콜을 사용해야 할지 알 수 없습니다(그리고 잘못된 프로토콜을 사용합니다).file:예를 들어, 결과적으로).
언급URL : https://stackoverflow.com/questions/24922833/font-awesome-icons-are-not-working-i-have-included-all-required-files
'programing' 카테고리의 다른 글
| 부트스트랩 열이 여러 행에 걸쳐지도록 하려면 어떻게 해야 합니까? (0) | 2023.09.05 |
|---|---|
| 도커 컨테이너의 셸에 어떻게 들어가나요? (0) | 2023.09.05 |
| MariaDB 테이블의 INSERT에 이미지 업로드가 실패하고 PDO::PARAM_LOB (0) | 2023.09.05 |
| 도커 컨테이너에서 PATH 환경 변수를 영구적으로 업데이트하는 중 (0) | 2023.09.05 |
| jQuery validator 플러그인 + ajax 제출이 작동하지 않음 (0) | 2023.09.05 |