이 글에서는 매우 사용하기 쉬운 아이콘 방식의 아이콘 폰트(IconFont)를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
아이콘 글꼴이란 무엇인가요? 이름에서 알 수 있듯이 글꼴이지만 이 글꼴은 특정 텍스트를 표시하는 것이 아니라 다양한 아이콘을 표시합니다.
웹사이트에서는 다양한 아이콘이 자주 사용됩니다. 과거에는 웹페이지의 아이콘 사용이 주로 스프라이트(배경 위치 + 배경 크기 조절)로 구현되었지만, 이런 방식으로 사용하는 데에는 많은 불편함이 있습니다. , 스케일링이 더 귀찮고, 반면에 일부 아이콘을 변경하려면 디자이너를 찾아 다시 디자인한 다음 다시 추가해야 합니다. 이 과정은 매우 불친절합니다.
아이콘 글꼴은 위의 문제를 매우 편리하게 해결할 수 있으며 사용도 매우 간단합니다. 폰트이기 때문에 배경이미지의 위치를 재는 번거로움 없이 해당 문자만 부여하면 됩니다. 그리고 아이콘 크기를 변경하려면 글꼴 크기만 변경하면 됩니다. 다음은 두 가지 권장 웹사이트입니다. (1) Alibaba 벡터 아이콘 라이브러리 http://iconfont.cn/ (2) IcoMoon의 https://icomoon.io/
IcoMoon의 구체적인 사용법은 아래에 나와 있습니다
1 . IcoMoon 웹사이트를 열고 IconMoon App을 클릭하세요.
2. 특정 아이콘에 대한 인터페이스가 있습니다. 자신만의 아이콘을 추가하여 생성하거나 기본 아래에 라이브러리에서 아이콘 추가를 선택할 수 있습니다. 아이콘을 클릭하면 더 많은 아이콘을 선택할 수 있습니다(무료 및 유료 모두).
3. 글꼴 생성을 클릭하면 현재 선택한 아이콘에 대한 인터페이스가 생성됩니다. 오른쪽 하단에 있는 글꼴 생성도 다운로드가 됩니다. : ie6/7 등을 지원하도록 하세요.)
4. 다운로드가 완료되면 다음 파일이 생성됩니다. 이 파일은 저장하고 임의로 삭제하지 않는 것이 가장 좋습니다.
5. 다음으로 아이콘 글꼴을 사용하는 구체적인 방법이 나와 있습니다. (직접 아이콘 글꼴을 사용한 CSS 파일을 볼 수도 있습니다. - 관련 내용은 style.css)
(1) 복사 글꼴 폴더 프로젝트로 이동하여 글꼴을 선언합니다. (여기의 코드는 기본적으로 동일하므로 외울 필요가 없으며 직접 복사하면 됩니다.)
@font-face { font-family: 'icomoon';/*声明字体名称,可自行设置,应用的时候对应即可*/ src: url('fonts/icomoon.eot?lep7lm'); src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lep7lm') format('truetype'), url('fonts/icomoon.woff?lep7lm') format('woff'), url('fonts/icomoon.svg?lep7lm#icomoon') format('svg'); font-weight: normal; font-style: normal; }
(2), 글꼴 사용
.IconMoon { font-family: 'icomoon'; }
(3) , 구체적으로 해당 아이콘
a를 표시합니다. 직접 사용합니다(매우 편리하지만 일반적으로 작은 사각형만 보는 것만으로는 이러한 아이콘의 차이를 알 수 없기 때문에 사용하지 않습니다). 예를 들어 작은 사각형
<li><span class="iconhome"></span></li> <li><span class="iconsmile"></span></li> <li><span class="icontongue"></span></li>
span 태그 중앙에 있는 것은 실제 사각형이 아니고, 데모 페이지의 각 아이콘 하단에 해당하는 오른쪽 사각형에 해당합니다.
b 추가하기 전에 CSS 의사 요소 선택기를 사용하세요.
<li><span class="icon-home">在这前面有一个home图标</span></li> <li><span class="icon-smile2">在这前面有一个smile2图标</span></li> <li><span class="icon-tongue2">在这前面有一个tongue2图标</span></li> <li><span class="icon-sad2">在这前面有一个sad2图标</span></li> <li><span class="icon-wink">在这前面有一个wink图标</span></li>
해당 CSS 코드는
.icon-home:before {/*content的值是对应的图标代码*/ content: "\e900"; } .icon-smile2:before { content: "\e9e2"; } .icon-tongue2:before { content: "\e9e4"; } .icon-sad2:before { content: "\e9e6"; } .icon-wink:before { content: "\e9e7"; }
효과 그림은
(4)입니다. 글꼴이므로 색상, 크기, 그림자 효과 등을 변경하는 것이 매우 편리합니다.
구체적인 코드는 다음과 같습니다
Document
6. 일부 아이콘은 그냥 웹사이트를 다시 열고 IconMoon App 페이지에 들어간 다음 아이콘 가져오기를 클릭하여 이전에 다운로드한 글꼴 파일 디렉토리에 selection.json 파일을 복사한 다음 작업할 수 있습니다. 이전에 선택한 것을 기반으로 다시 사용하는 것이 매우 편리합니다.
요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , CSS3 동영상 튜토리얼 을 방문하세요!
위 내용은 CSS 아이콘 글꼴(IconFont)이란 무엇입니까? 무슨 소용이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!