2017-12-01 7 views
3

으로 바뀌 었습니다. 저는 수년 이래로 font-awesome 같은 아이코닉 글꼴로 일하고 있습니다. 나는 웹 페이지에 심장 아이콘을 추가 할 필요가있을 때HTML 태그의 텍스트 내용이

는 지금까지, 나는이 HTML 구문

<i class="fa-heart"></i> 

기술적를 사용, 그것은 의사 요소 :before을 사용하고 상징적 인 글꼴의에 클래스 이름을 연결 다음 글꼴 멋진 릴리스의 문서에 문자

fa-heart:before { 
    content: "\f004"; 
} 

하지만, 그것을 할 수있는 새로운 방법은 다음과 같습니다

<i class="fa">heart</i> 

심장 단어를 기술적으로 대체 할 수있는 방법은 무엇입니까? 그 트릭은 어디 있습니까?

+1

특수 합자 글꼴 - https://css-tricks.com/ligature-icons/ –

답변

1

그들은 일련의 문자를 합자로 지칭하여 구별되는 아이콘으로 변합니다.

기본적으로 합자는 두 개 이상의 문자 조합으로, 글꼴이 이러한 조합을 지정하면 결합 결과를 표시하는 방법을 선택할 수 있습니다.

전통적으로 합자는 두 글자를 결합하여 서로 옆에 놓을 때 잘 흐르게하기 위해 사용됩니다. 이 기술은 CSS 버전의 합자를 사용하여 사용자 지정 아이콘을 설정합니다. 이 페이지를 체크 아웃 주제에 대한 자세한 내용은

enter image description here

: https://css-tricks.com/ligature-icons/

이 또한 재료 아이콘에 대한이 답변에서 논의되었습니다이 문서에서 https://stackoverflow.com/a/44928943/1528308

0

: https://alistapart.com/article/the-era-of-symbol-fonts

글꼴 ligatures-subtle이라는 특수 문자가 있습니다. 종종 은 눈에 띄지 않으며, 을 읽는 데 사용되는 글자 서식을 수정합니다. 예를 들어 두 개의 "f"문자를 가져옵니다. 좋은 글꼴은 "ff"를 fg 이 매끄럽게 연결되는 단일 합자로 변환합니다. ff, fl 및 fi를 비롯한 몇 가지 표준 합자가 있습니다. 그러나 자신 만의 정의도 할 수 없습니다. 에서 글꼴 파일은 단순한 대체 문자입니다. 모든 합자는 문자의 오른쪽 순서입니다 찾고 있습니다. 입력 할 때 은 다른 글리프로 바뀝니다. 즉, "A List Apart"와 같은 문자열을 하나의 로고 심볼 아이콘으로 변환 할 수 있습니다.