Font Awesome not working, 사각형으로 표시되는 아이콘

224

마케팅 페이지의 프로토 타입을 제작하려고하는데 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>

그러나 모든 것이 큰 사각형으로 렌더링됩니다. 아무도 무슨 일이 일어나고 있는지 알고 있습니까?

css  html  twitter-bootstrap  font-awesome 
— 코너 블랙
소스
1
글꼴을 가져오고 있습니까?
— mayhewr
1
아마 아닙니다. .css파일 만 포함하면된다고 생각했습니다 .
— 코너 블랙
2
제목은 문제가 Chrome에만 해당함을 의미합니다. 다른 브라우저에서로드 중입니까? 아니면 참조 된 글꼴 파일이 404입니까?
— cimmanon
1
2016 년 8 월 기준으로 위 링크에서 3 단계를 찾을 수 없습니다.
— Saurabh Tiwari
1
웹 폰트 폴더 복사를 잊었습니까?
— entithat

답변:

149

설명서 (3 단계) 에 따르면 제공된 CSS 파일을 수정하여 사이트의 글꼴 위치를 가리켜 야합니다.

— 메이 허
소스
5
큰 대답은 추가 정보를 제공하기 위해 CSS에서 제공하는 기본 경로에 글꼴을 배치하고 Font-awesome.css를 열면 다음 항목을 찾을 수 있습니다. @ font-face {font-family : 'FontAwesome'; src : url ( '../ font / fontawesome-webfont.eot? v = 3.2.1'); src : url ( '../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Braulio
1
동일한 문제가있는 향후 ASP.NET MVC 리더의 경우 : 올바른 위치에 모든 폴더가있는 경우 여기에서 지정한대로 web.config 파일에 MIME 유형을 추가했는지 확인하십시오. stackoverflow.com/questions/4015816/…
— jpgrassi
1
base64 버전의 글꼴로 온라인으로 쉽게 변환 할 수있는 Data URI Scheme을 사용하면 올바른 파일 경로 및 리소스 호스팅에 대해 걱정할 필요가 없습니다.
— 르네상스
참고 : CSS를 수정하지 않으려면 CSS와 글꼴을 같은 폴더에
— 넣으십시오.
7
@tutuca : 모든 사람이 CDN을 사용할 수있는 것은 아닙니다.
— 궤도에서 가벼움
188

당신은이 클래스는 있어야합니다 fa클래스와 클래스를 그 식별 원하는 아이콘 fa-twitter, fa-search, 등 ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
— 나빌 카디 미
소스
4
이것은 CSS가 제공하는 가장 좋은 대답이어야합니다. CSS는 폰트 파일을 옮기지 않는 한 올바른 위치를 가리 킵니다. 이것은 벽에 감사하게
— 만들었
5
참고 : "fa 접두사는 버전 5에서 더 이상 사용되지 않습니다. 새로운 기본값은 fas 솔리드 스타일과 브랜드의 fab 스타일입니다."
— Terje Solem
1
이것은 나를 위해 그것을 고쳤다! 나는 프라임과 함께 Angular (5 생각)를 사용하고 있으며 xx.component.ts 내부의 MenuItem-definitions (아이콘이 올바르게 렌더링 됨)에서 글꼴이 훌륭하게 작동하는 것 같습니다. 그러나 xx.component.html에 무언가를 추가 할 때 (예 : 아이콘이있는 p- 버튼) fa 클래스 와 fa- <whatever icon> 을 추가해야 합니다!
— Igor
1
@TerjeSolem 당신이 준 정보는 매우 중요합니다. 내 문제를 해결했습니다. 내가 이전 버전을 사용하고 있었지만 "fas"덕분에
— MindRoasterMir
🤦‍♂️ 감사합니다! 열린 아이콘 oi oi-와 동일합니다. 첫 번째 oi를 잃었습니다.
— 알렉산더
54

이것을 사용하십시오 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Amazon Cloudfront CDN과 비슷한 문제가 있었지만 maxcdn에서로드를 시작한 후에 해결되었습니다.

— 쿠마 디심
소스
6
font-awesome의 CDN을 사용한다고 가정합니다. 상업적인 프로덕션 환경에서는 이렇게하지 않을 것입니다.
— Jay Edwards
48

이것은 도움이 될 수 있습니다 실수로 폰트 패밀리를 변경하지 않았 음을 확인하기 위해 확인 아이콘. .fa 항목의 글꼴 패밀리를 FontAwesome에서 변경 한 경우 아이콘이 표시되지 않습니다. 항상 바보 같은 작은 것입니다.

누군가에게 도움이되기를 바랍니다.

— 브렌 1818
소스
11
빙고! 정말 고마워. Metro-UI는 멋진 글꼴 모음을 재정의했습니다. 나는 이것을 추가해야했다 : .fa {font-family : 'FontAwesome'! important; } 그런 다음 작동했습니다.
— Debbie A
1
네. 어리 석고 작은. 다른 것의 글꼴을 바꾸고 멋진 아이콘에 영향을 미치는이 문제는 너무나도 어리석어졌습니다.
— Edd
2
그렇습니다-이 줄은 비난을 받았습니다 (더 구체적으로 말하자면!! 중요한 규칙) : * {font-family : 'Source Sans Pro'! important}
— Svet
1
문제를 찾는 데 시간을 낭비하지 않도록 Font Awesome을 사용하는 데있어 가장 중요하고 유용한 팁입니다.
— Dez
22

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;
}
— jonschlinkert
소스
모든 아이콘 대신 특정 아이콘 만 가져 오는 방법이 있습니까? CSS 파일 만 몇 개의 아이콘으로 컴파일하고 싶습니다.
— user805981 2016 년
@fa-font-path: "../fonts";나를 위해 일했다. (실종 s추가 통지 )
— prograhammer
18

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">
— 에르가 칸 들리
소스
13

몇 가지 이전 솔루션으로 동일한 문제를 해결하려고 시도했지만 내 상황에서는 작동하지 않았습니다. 마지막으로 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">
— 보이 칸 시비 야노 비치
소스
12

내가 사용하고 Font Awesome 4.3.0단지에서 연결 maxcdn 작품 언급 한 바와 같이 여기 ,

하지만 같은 폴더에 글꼴과 CSS를 넣어 서버에서 호스팅 하면 다음과 같이 저에게 효과적이었습니다.

여기에 이미지 설명을 입력하십시오

그런 다음 CSS를 연결하십시오.

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

희망은 누군가를 돕는다.

— 샤이 ut
소스
8

fas 클래스와 fa 클래스의 2 개의 클래스가 있어야합니다.

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
— 이스라엘
소스
3
이것을 알지 못했습니다-v5부터는 클래스 대신 fab또는 fas클래스가 필요합니다 fa.
— Echilon
7

나는이 문제가 있었다. 문제는 내가 fontawesome 글꼴을 무시하는 중요한 글꼴 패밀리 CSS 스타일을 가지고 있다는 것입니다.

— 조니 화이트
소스
* {font-family : Helvetica, sans-serif! important;와 같은 문제가있었습니다. }
— Dubbo
6

경우 당신이 작업하는 메이븐 과 아파치 개찰구는 또한 글꼴 - 신난다 및 아이콘이로드되지로 문제를 해결하려고하기 위해 다음을 확인 :

예를 들어 다음 파일 구조에 파일을 배치 한 경우

/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

확인 1) 글꼴 파일을 올바르게로드하기 위해 Package Resource Guard를 올바르게 사용하고 있습니까?

WebApplication을 확장하는 클래스의 예 :

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

확인 2) 모든 글꼴이 웹 브라우저로 올바르게 전송되었는지 확인한 후 실제로 웹 브라우저로 전송 된 내용을 확인하십시오. 즉, 글꼴 파일의 무결성이 변경 되었습니까? 예를 들어 Firefox 및 DiffDog의 웹 개발자 도구 모음 (파일 비교 용)을 사용하여 소스 디렉토리의 파일과 웹 브라우저로 전송 된 파일을 비교하십시오.

특히 Maven을 사용하는 경우 리소스 필터링에주의하십시오. / font 파일이 들어있는 폴더를 필터링하지 마십시오. 그렇지 않으면 파일이 손상됩니다.

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>

위의 예에서는 CSS 및 글꼴 파일이 포함 된 src / main / java 폴더를 필터링하지 않습니다.

이진 데이터 필터링에 대한 자세한 내용은 다음 설명서도 참조하십시오.

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

특히 다음 과 같은 경고 메시지가 표시됩니다. " 경고 : 이미지와 같은 이진 콘텐츠가 포함 된 파일을 필터링하지 마십시오. 출력이 손상 될 가능성이 높습니다. 텍스트 파일과 이진 파일이 모두 리소스 인 경우 두 개의 상호 배타적 인 리소스 세트를 선언해야합니다. 첫 번째 자원 세트는 필터링 할 파일을 정의하고 다른 자원 세트는 변경되지 않은 복사 할 파일을 정의합니다 ... "

— 필립
소스
6

나는이 문제가 있었고 조심스럽게 각 단계를 거쳤습니다 ... 노년 동안 FA를 사용해 왔지만 ... 내 메일 CSS 파일 에이 줄이 있음을 깨달았습니다.

* {
font-family: Arial !important;
}

어리석은 실수이지만 앞으로 누군가에게 팁을 줄 수 있습니다!

— J도
소스
4

글꼴 파일의 경우 Access-Control-Allow-Origin 헤더 를 * 로 반환해야 합니다.

— 트로닉
소스
2
바로 그거죠! 타사 제공 업체를 사용하여 멋진 파일을 제공한다고해서 문제가 해결되는 것은 아니며 다른 사람에게 전달하여 해결해야합니다.
— Simanas
4

2018 년 12 월 현재 웹 사이트 에서 글꼴이 멋진 5.xx cdn 대신 bootstrapcdn에서 호스팅되는 안정적인 버전 4.7.0을 사용하는 것이 더 쉽다는 것을 알았 습니다. 마이너 버전을 업그레이드 할 때마다 이전 버전이 중단되기 때문입니다.

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

아이콘은 동일합니다 :

<i class="fa fa-facebook"></i>
— ehacinom
소스
3

font-weight: 900;

Font Awesome 5와는 다른 문제가있었습니다. FontAwesome 아이콘의 기본 글꼴 가중치는 900이어야하지만 span 및 i 태그의 경우 400으로 덮어 씁니다. 내가 고쳤을 때 방금 효과가있었습니다.

다음은 Github 페이지 ( https://github.com/FortAwesome/Font-Awesome/issues/11946 )의 문제 참조입니다.

누군가에게 도움이되기를 바랍니다.

— 매니아
소스
1
내 문제이기도 했어요 Font-Family를 "Font Awesome 5 Free"로 설정했지만 글꼴 가중치도 900으로 설정해야했습니다!
— 한스 본
3

버전 5. * 이상을 사용하는 경우

all.css 또는 all.min.css

가에 대한 참조가 없기 때문에 작업 fontawesome.css을하지 않습니다 포함 웹 글꼴 폴더를하고 @ 글꼴 얼굴이나 글꼴 - 가족에 대한 참조가 없기

fontawesome.css 또는 fontawesome.min.css에서 font-family 속성에 대한 코드를 검색하여이를 검사 할 수 있습니다.

— the_haystacker
소스
이 방법은 저에게 완벽한 솔루션이었습니다. 너무
— 나쁘면
2

CSS가 글꼴을로드하고 아이콘을 렌더링 할 수 없도록 글꼴 경로가 올바르지 않을 수 있으므로 첨부 된 글꼴의 연선 경로를 제공해야합니다.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
— SantoshK
소스
2

이 사이트에서 패키지를 다운로드 한 경우 버전 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">
— 살아있는 사랑
소스
2

해결책을 찾는 데 어려움을 겪고 공식 문서가 도움이되지 않으면 문제가 해결되었습니다.

  1. Fontawesome.zip을 다운로드하십시오. 5.10.2 버전을 사용하고 있으며 여기에서 https://fontawesome.com/download

  2. zip 파일에는 여러 개의 폴더가 있습니다 .CSS 및 웹 폰트 폴더 만 있으면됩니다. 여기에 이미지 설명을 입력하십시오

    1. 웹 프로젝트에서 2 개의 폴더를 만들고 css 및 webfonts로 이름을 지정하십시오. 여기에 이미지 설명을 입력하십시오

이 이름은 필수입니다. 이제 css 및 webfonts의 내용을 zip에서 프로젝트의 해당 폴더로 복사하십시오. 그리고 그게 전부입니다!

서체를 조심하십시오! 굉장함은 사용자를 위해 일을 간단하게 만들고 있습니다!

— 바바
소스
1

3.2.1에서 4.0.1로 변경했으며 폴더는 글꼴이며 이제 글꼴이라고합니다.

src : url ( '../ font / fontawesome-webfont.eot? v = 3.2.1');

src : url ( '../ fonts / fontawesome-webfont.eot? v = 4.0.1');

누군가에게 도움이되기를 바랍니다.

— 안드레 두 아르테
소스
1

내가 사용하는 공식 글꼴 최고 SASS 루비 보석 내 application.css.scss에 라인 아래를 추가하여 고정 오류를

@import "font-awesome-sprockets";

설명:

font-awesome-sprockets 파일에는 글꼴 파일의 올바른 경로를 찾는 데 사용되는 sprockets assest helper Sass 함수가 포함되어 있습니다.

— 마 클라
소스
1

sass를 사용하고 main.scss에서 가져온 경우 @import '../vendor/font-awesome/scss/font-awesome.scss';

상대 경로에서 글꼴 파일을 찾는 font-awesome.scss 파일에서 오류가 발생할 수 있습니다.

그러니 기억해 은 $ FA-글꼴 경로 변수를 오버라이드 (override) : $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

이와 같이 index.html에 cdn을 추가 할 필요가 없습니다.

— 빌스 볼
소스
1

fontawesome-all.css 파일을 다시 확인하십시오. 맨 아래에는 webfonts 폴더의 경로가 있습니다. 광산에는 "../webfonts"형식이있어 CSS 파일이 원래 위치에서 1 단계 위로 올라간 것을 의미합니다. 모든 CSS 파일이 CSS 폴더에 있었고 글꼴을 동일한 폴더에 추가했기 때문에 작동하지 않았습니다.

글꼴 폴더를 한 수준 위로 옮기면 모든 것이 잘됩니다. :)

Font Awesome 5.0으로 테스트

— 로스
소스
오래된 문서에 연결하지 않고 직접 질문에 답변하므로이 방법이 선호되는 답변이어야합니다. Kudos
— Kyle Champion
1

원사로 다운로드 한 글꼴 멋진 5와 동일한 문제가 있었으며 all.js 파일 과 함께 min.css 파일을 ALONG 으로 추가했습니다 .

누군가에게 도움이되기를 바랍니다.

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
— 엔리케 마르티네즈
소스
1

/css/all.css 파일에는 핵심 스타일과 Font Awesome을 사용할 때 필요한 모든 아이콘 스타일이 포함되어 있습니다. / webfonts 폴더에는 위 CSS가 참조하고 의존하는 모든 서체 파일이 들어 있습니다.

전체 / webfonts 폴더와 /css/all.css를 프로젝트의 정적 자산 디렉토리 (또는 프런트 엔드 자산 또는 공급 업체 항목을 유지하려는 경우)에 복사하십시오.

Font Awesome을 사용하려는 각 템플리트 또는 페이지에 복사 한 /css/all.css 파일에 대한 참조를 추가하십시오.

그냥 방문-https: //fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 당신은 대답을 얻을 것입니다.

— 디프 쉬 쇼한
소스
0

상대 경로 대신 절대를 사용하면 해결되었습니다. 상대 경로를 사용하고 있었고 (아래 첫 번째 예 참조) 작동하지 않습니다. 콘솔을 통해 확인한 결과 서버에서 404 파일을 찾지 못했습니다.

상대 경로로 인해 404가 발생했습니다. 

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

절대 경로는 브라우저 간을 해결했습니다.

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

당신이하지 않으면 이것을하지 않는 것이 좋지만 그것은 나를 위해 작동합니다. 물론 font-awesome.css 파일의 모든 글꼴 형식에 대해이 작업을 반복해야합니다.

— 팀
소스
0

내가 가지고 있기 때문에 그것은 나를 위해 작동하지 않았다 Allow from none아파치 구성의 루트 디렉토리에 대한 지시문이 . 작동 방법은 다음과 같습니다.

내 디렉토리 구조 :

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

내 index.html의 위치 :

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

루트에 대한 액세스를 계속 거부하고 대신 아파치 구성에 root / font-awesome /에 대한 다른 디렉토리 항목을 추가했습니다. 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
— 사용자 3325776
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.