글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

programing

글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

closeapi 2023. 9. 28. 08:24

글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

그래서 마케팅 페이지 프로토타입을 시도하고 있으며 부트스트랩과 새로운 폰트 어썸 파일을 사용하고 있습니다.문제는 아이콘을 사용하려고 하면 페이지에 렌더링되는 것이 큰 사각형밖에 없다는 것입니다.

파일을 머리에 포함하는 방법은 다음과 같습니다.

<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>

하지만 그 모든 것은 큰 광장에서 그려집니다.무슨 일인지 아는 사람?

은 2 꼭 합니다.fa 및 클래스하는 클래스를 fa-twitter,fa-search…,…

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

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

부트스트랩 5 업데이트

참고: "fa 접두사는 버전 5에서 더 이상 사용되지 않습니다.새로운 기본값은 브랜드의 빠른 솔리드 스타일과 팹 스타일입니다." – Terje Solem

제공된 CSS 파일은 문서(3단계)에 따라 사이트의 폰트 위치를 가리킬 수 있도록 수정해야 합니다.

사용합니다.

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

아마존 클라우드프론트 CDN과 비슷한 문제가 있었는데 maxcdn에서 로딩을 시작한 후 해결되었습니다.

아이콘의 글꼴 패밀리를 실수로 변경하지 않았는지 확인합니다..fa 항목의 글꼴 패밀리를 다음에서 변경한 경우:글꼴 아이콘이 표시되지 않습니다.그것은 항상 어리석고 작은 것입니다.

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-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">

은 2 꼭 합니다.fas과.fa-*class. 문서의 Basic Use를 참조하십시오.

fa접두사가 버전 5에서 더 이상 사용되지 않습니다.과 같습니다.fasefab브랜드 스타일

// Correct (version >= 5)
<i class="fas fa-search"></i>    

// Wrong (version < 5)
<i class="fa fa-search"></i>

사용중입니다Font Awesome 4.3.0여기 언급된 것처럼 maxcdn 작업에서 링크하는 것 뿐입니다.

하지만 폰트와 CSS를 같은 폴더에 넣어 당신의 서버에서 호스팅하는 것은 나에게 효과적이었습니다.

enter image description here

그럼 CSS만 링크하면 됩니다.

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

이전에 몇 가지 해결책으로 같은 문제를 해결하려고 했지만 제 상황에서는 효과가 없었습니다.마지막으로 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">

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

전부. css 또는 전부.분.

webfonts 폴더에 대한 참조가 없고 @font-face 또는 font-family에 대한 참조가 없으므로 fontawesome.css를 포함하면 작동하지 않습니다.

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

저는 이 문제를 가지고 있었고 한 단계 한 단계를 신중하게 거쳤습니다.FA를 오랫동안 써왔지만...제 메일 CSS 파일에 이 줄이 있다는 걸 깨달았어요

* {
font-family: Arial !important;
}

바보 같은 실수지만, 이것은 미래에 누군가에게 팁을 줄 수도 있습니다!

이런 문제가 있었습니다.문제는 !중요한 폰트 패밀리 CSS 스타일이 폰트 멋진 폰트를 우선시한다는 것입니다.

Maven과 Apache Wicket을 사용하는 경우 Font-Awesome과 아이콘이 로드되지 않는 문제를 해결하기 위해 다음 사항도 확인합니다.

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

/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) 글꼴 파일을 올바르게 로드할 수 있도록 패키지 리소스 가드를 올바르게 사용하고 있습니까?

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

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

}

확인 2) 모든 글꼴이 웹 브라우저로 올바르게 전송되었는지 확인한 후 실제로 웹 브라우저로 전송된 글꼴 파일의 무결성이 변경되었는지 확인합니다.Firefox 및 DiffDog의 Web Developer Toolbar(파일 비교용)를 사용하여 소스 디렉토리의 파일과 웹 브라우저로 전송된 파일을 비교합니다.

특히 메이븐을 사용하는 경우에는 리소스 필터링에 유의해야 합니다./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

특히 문서에는 다음과 같이 경고되어 있습니다. "경고: 이미지와 같은 이진 콘텐츠를 가진 파일을 필터링하지 마십시오!이렇게 되면 출력이 손상될 가능성이 높습니다.텍스트 파일과 이진 파일을 모두 리소스로 사용하는 경우 두 개의 상호 배타적 리소스 집합을 선언해야 합니다.첫 번째 리소스 세트는 필터링할 파일을 정의하고 다른 리소스 세트는 변경되지 않고 복사할 파일을 정의합니다.."

2018년 12월 현재, 저는 이전 버전을 업그레이드할 때마다 이전 버전이 깨지기 때문에 웹사이트의 글꼴이 멋진 5.x.x cdn 대신 부트스트랩 cdn에서 호스팅되는 안정 버전 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>

font-weight: 900;

폰트 어썸 5와 다른 문제가 있었습니다.기본 폰트 가중치는 폰트 A 일부 아이콘의 경우 900이 되어야 하지만 스팬과 i 태그의 경우 400으로 덮어썼습니다.제가 수정했을 때 효과가 있었습니다.

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

이는 새로운 버전 3.0에서는 훨씬 간단할 것입니다.가장 쉬운 방법은 부트스트랩 CDN을 가리키는 것입니다: http://www.bootstrapcdn.com/ ?v=01042013155511#tab_some

서버가 IIS인 경우 .woff 파일 확장명을 제공하기 위해 올바른 MIME을 추가해야 합니다.른 MIME입니다.application/octet-stream

글꼴 파일에 대한 헤더 Access-Control-Allow-Origin을 *로 반환해야 합니다.

해결책을 찾기 위해 고군분투하고 공식 문서가 도움이 되는 것을 찾지 못하자 이를 통해 문제를 해결할 수 있었습니다.

Fontawesome.zip을 다운로드합니다.버전 5.10.2를 사용하고 있는데 여기 https://fontawesome.com/download 에서 받았습니다.
zip 파일 안에는 여러 폴더가 있습니다.CSS와 웹폰트 폴더만 있으면 됩니다.
1. 웹 프로젝트에 폴더 2개를 만들고 CSS와 웹 폰트로 이름을 짓습니다.

이 이름들은 필수 사항입니다.이제 zip에서 css와 웹폰트의 내용을 프로젝트의 해당 폴더에 복사합니다.그게 다예요!

멋진 분 조심하세요!놀라운 것은 사용자를 위해 일을 단순하게 만드는 것입니다!

원사와 함께 다운로드한 폰트 어썸 5에 대해서도 같은 문제가 있었는데, min.css 파일을 all.js 파일과 함께 추가했습니다.

이것이 누군가에게 도움이 되길 바랍니다.

<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>

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

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

사용합니다.<i class="fa fa-camera-retro" ></i>다로 .

버전 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">

당신의 페이지 상단에 연결된 폰타썸 cdn 폰타썸 cdn이 있는지 확인하세요.
.fa 클래스에 다른 글꼴 패밀리 속성이 주어지지 않았는지 확인합니다.일반적으로 페이지에 있는 모든 태그에 스타일을 지정할 때 발생합니다.이것처럼.

* {
  font-family: Arial;
}

대신 이것을 사용합니다.

*:not(.fa){
  font-family: Arial;
}

폰타썸 웹사이트에 정확한 클래스 이름을 입력했는지 확인합니다.복사하여 붙여넣기를 합니다.

Cloudflare CDN을 사용하는 경우 아래 링크 태그를 사용하여 페이지에서 폰트 어썸을 사용할 수 있습니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fa fa-home"></i>

저는 Official Font Awesome SASS Ruby Gem을 사용하고 제 application.css.scss에 아래 줄을 추가하여 오류를 수정했습니다.

@import "font-awesome-sprockets";

설명:

글꼴이 멋진 스프로켓 파일에는 글꼴 파일에 대한 적절한 경로를 찾는 데 사용되는 스프로켓 검사 도우미 Sass 함수가 포함되어 있습니다.

sass 를.scss로 . @import '../vendor/font-awesome/scss/font-awesome.scss';

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

따라서 $fa-font-path 변수를 재정의해야 합니다. $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

이와 같이 당신의 인덱스에 cdn을 추가할 필요가 없습니다.

폰타썸-all.css 파일을 두 번 확인합니다. 맨 아래에 웹폰트 폴더로 가는 경로가 있습니다.내 것은 "../webfonts" 형식을 가지고 있었는데, 이것은 CSS 파일이 있는 곳에서 한 단계 위를 보고 있다는 것을 의미합니다.제 모든 CSS 파일이 CSS 폴더에 있었고 폰트를 같은 폴더에 추가했기 때문에 작동하지 않았습니다.

폰트 폴더를 한 단계만 올리면 모든 것이 잘 될 것입니다 :)

Font Awesome 5.0으로 테스트 완료

상위 클래스와 함께 사용

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

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

전체 /webfonts 폴더와 /css/all.css를 프로젝트의 정적 자산 디렉토리(또는 프런트 엔드 자산 또는 벤더 항목을 보관하는 데 필요한 곳)에 복사합니다.

Font Awesome을 사용할 각 템플릿 또는 페이지의 에 복사된 /css/all.css 파일에 대한 참조를 추가합니다.

Just Visit - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 답변을 받으실 수 있습니다.

(무료) Font Awesome 5 버전에서는 제가 이해하기 어려웠고, 저는 그것에 관심을 기울이지 않았던 아주 작은 세부사항이 있습니다.

Style   Availability    Style Prefix    Example Rendering
Solid   Free            fas             <i class="fas fa-camera"></i>
Brands  Free            fab             <i class="fab fa-font-awesome"></i>

(문서에서 extracted)

이를 인용하면, 다음과 같은 브랜드 아이콘.fa-twitter아니면fa-react클래스와 함께 사용해야 하며 다른 모든 (무료) 아이콘은 클래스와 함께 사용해야 합니다.그것은 감독하기 쉽습니다.

언급URL : https://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares

'programing' 카테고리의 다른 글

자바스크립트의 숫자에서 선행 0 제거 (0)	2023.09.28
오류 유형: $.browser가 정의되지 않았습니다. (0)	2023.09.28
루프용 자바스크립트를 중지하는 방법? (0)	2023.09.28
$http에서 이미지를 반환하는 방법.AngularJS에 들어가다 (0)	2023.09.28
WooCommerce 프론트엔드에서 주문항목 메타 숨기기(관리 아님) (0)	2023.09.28

현재글글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

각종 프로그래밍 정보를 다루는 블로그입니다.

spring-boot, MariaDB, ajax, SWIFT, PowerShell, jQuery, sql-server, C, Android, angularJS, Oracle, json, asp.net, PYTHON, wordpress, mongodb, Git, mysql, ReactJS, Excel,

Today :
Yesterday :

closeapi

글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

부트스트랩 5 업데이트

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

글꼴 어썸이 작동하지 않음, 아이콘이 사각형으로 표시됨

부트스트랩 5 업데이트

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바