수색…
웹 페이지에 아이콘 글꼴 포함
CSS에 아이콘 글꼴을 포함 시키려면 다음 코드를 포함시켜야합니다.
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
웹 페이지에서 아이콘 글꼴 사용
HTML에서 아이콘을 사용하려면 다음 각각을 수행 할 수 있습니다.
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
방법 7을 선택하려면 추가 CSS 코드가 필요합니다. 이 CSS 코드는 다음과 같습니다.
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Iconic , Font Awesome 또는 Glyphicons 와 같은 아이콘 글꼴은 일반적으로 방법 7을 사용합니다. 치트 시트에서 특수 문자를 복사하여 붙여 넣거나 HTML 엔티티를 사용해야하는 것을 피하기 위해이 방법을 사용합니다.
그러나 몇 가지 단점이있는 방법입니다. 우선, 그것은에 대한 지원이 필요 :before CSS 선택 및 유니 코드 문자 이스케이프 시퀀스의 사용을. IE6-7이나 Webkit의 특정 버전 도이 지원을 제공하지 않습니다.
또 다른 단점은 각 아이콘이 아이콘 글꼴의 한 문자에 해당하는 별도의 HTML 태그를 각 아이콘에 사용해야한다는 것입니다. HTML 태그 내에 여러 아이콘을 표시하는 것은 다른 방법과 달리 방법 7에서 불가능합니다.
그러나 다른 방법은 자체 단점을 가지고 있습니다. 방법 1, 3 및 5에서는 치트 시트에서 문자를 복사하여 붙여 넣거나 코드 내에 문자 자체를 삽입하는 방법을 사용해야합니다. 코드 편집기가 문자를 표시 할 수 없거나 아이콘 글꼴이 그 문자와 다른 비표준 매핑을 사용하는 경우 아이콘 글꼴의 다른 문자를 표시 할 수 있습니다.
방법 1, 3 및 5에서도 브라우저가 올바른 문자를 표시하기 위해 적절한 인코딩을 사용해야합니다. 유니 코드 문자의 경우 ASCII 문자만큼 명확하지 않습니다. 그러나 메타 태그 <meta charset="utf-8" /> HTML 문서의 head 부분에 추가하면됩니다.
방법 2, 4 및 6에서는 캐릭터를 복사하여 붙여 넣을 필요가 없지만 코드가 사람이 읽을 수 없게 만들고 코드를 변경하면 사람이 실수를 범하기 쉽습니다. 또한 사용하려는 각 아이콘에 대해 HTML 엔티티 코드를 찾아야하므로 필요할 때 기억할 필요가 있습니다. 7 번 방법에서도 사용 된 클래스에도 똑같이 적용되지만이 클래스는 HTML 엔터티 코드보다 훨씬 쉽게 기억할 수 있습니다.
웹 페이지에 특정 기호 포함
아래쪽을 가리키는 삼각형을 생각해보십시오.
이 기호를 웹 페이지에 표시하는 몇 가지 올바른 방법이 있습니다.
방법 1 : 10 진수 HTML 엔터티 사용
HTML :
▼
방법 2 : 16 진수 HTML 엔터티 사용
HTML :
▼
방법 3 : 문자 직접 사용
HTML :
▼
방법 4 : CSS 사용
HTML :
<span class='icon-down'></span>
CSS :
.icon-down:before {
content: "\25BC";
}
이 세 가지 메소드 각각은 동일한 출력을 가져야합니다. 다른 기호에는 동일한 세 가지 옵션이 있습니다. 일부는 문자열 기반 참조 (예 : ♥ ♥ 표시)를 사용할 수있는 네 번째 옵션도 있습니다.
Unicode-table.com 과 같은 참조 웹 사이트를 사용하여 유니 코드 에서 지원되는 아이콘과 해당 아이콘을 찾을 수 있습니다. 예를 들어 http://unicode-table.com/en/25BC/ 에서 아래쪽 삼각형의 값을 찾으십시오.
이 메서드는 모든 브라우저에서 기본적으로 사용할 수있는 아이콘에 대해서만 충분합니다. ,, ❄, ★, ☂, ☭, ⎗ 또는 symbols와 같은 기호의 경우에는 그렇지 않습니다. 다른 유니 코드 기호에 대한 브라우저 간 지원을 제공하는 것이 가능하지만 아이콘 글꼴을 구하거나 자신의 글꼴을 만들어야합니다. 자신의 글꼴 을 만드는 방법에 대한 자세한 내용 은 자신의 글꼴 만들기를 참조하십시오.
인기있는 아이콘 글꼴
다음은 자주 사용되는 아이콘 글꼴 목록입니다.