ionic-framework => 이오 콘

비고

현대 웹 개발에서는 글꼴을 사용하여 아이콘을 표시하는 것이 일반적입니다. 글꼴은 벡터이므로 해상도에 독립적이며 CSS를 통해 쉽게 색칠 할 수 있습니다. 비트 맵 이미지 등과 비교할 때 몇 가지 이점을들 수 있습니다. Ionicons는 Ionic Framework가 작성한 동일한 팀에서 만들어졌으며 이후 프로젝트에서 사용할 수 있습니다. 그들은 100 % 무료이며 오픈 소스입니다. MIT 라이센스.

Ionicons는 부모 요소에 따라 특정 스타일을 가질 때 자체 또는 Ionics CSS 구성 요소와 함께 사용할 수 있습니다.

홈페이지 및 아이콘 목록은 http://ionicons.com/ 에서 확인할 수 있습니다.

기본 사용법

글꼴 아이콘은 대개 <i> 태그 안에 있습니다. 이오니아는 사용하기 쉬운 아이콘의 기본 CSS 스타일을 가지고 있습니다. 가장 기본적인 사용 예 :

<i class="icon ion-home"></i>

확장 된 사용

Ionic에는 프리셋 스타일링을 기본으로 Ionicon을 사용할 수있는 몇 가지 CSS 구성 요소가 있습니다. <div> 항목의 range 클래스는 입력과 그 안에있는 아이콘 모두에 올바른 스타일을 적용합니다. 다음은 범위 슬라이더의 예입니다.

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

Ionic 탭에서의 Ionicon 사용에 대한 또 다른 예제는 메뉴와 같은 탭을 생성합니다. tabs-striped tabs-color-assertive 클래스는 탭 자체의 스타일을 정의합니다. 아이콘은 간단한 <i> 태그와 함께 사용되며 부모 div에 적용된 클래스에서 위치 스타일을 얻습니다.

<div class="tabs-striped tabs-color-assertive">
  <div class="tabs">
    <a class="tab-item" href="#">
      <i class="icon ion-home"></i>
      Home
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-gear-b"></i>
      Settings
    </a>
</div>

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

ionic-framework
이오 콘

수색…

비고

기본 사용법

확장 된 사용