본문으로 건너뛰기
黯羽轻扬매일 조금씩

ionic 에서 서드파티 iconfont 사용 방법

무료2015-11-25#Ionic#Front-End#Solution#ionic的iconfont#ionic的icon-on#ionic的icon-off#ionic使用图标字体#ionic自定义图标字体#ionic字体图标#ionic矢量图标

ionic 에서 커스텀 iconfont 를 사용하는 방법에 대해, 상세한 해결책을 제공합니다

一。문제 재진술

ionic 공식은 많은 아이콘 (ion-xx) 을 제공하지만, 그래도 부족하고 많은 아이콘을 찾을 수 없습니다 (微信/QQ/QR 코드/흔들기...)

물론, 기존 방법에 따르면, 오픈소스 아이콘 라이브러리에서 찾을 수 있습니다. 예를 들어Iconfont-阿里巴巴矢量图标库

찾은 후, 서드파티 iconfont 를 ionic 에 임포트하여 템플릿 파일에서 사용하려면 어떻게 해야 할까요?

二。해결책

###1.iconfont 의 도입 방법

ionic 의 lib 폴더를 확인하면 알 수 있습니다:

lib\ionic\fonts 폰트 파일
lib\ionic\css   스타일 파일

스타일 파일 ionic.css 에는 iconfont 가 정의되어 있습니다:

@font-face {
    font-family: "Ionicons";
    src: url("../fonts/ionicons.eot?v=2.0.1");
    src: url("../fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("../fonts/ionicons.woff?v=2.0.1") format("woff"), url("../fonts/ionicons.woff") format("woff"), url("../fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
    font-weight: normal;
    font-style: normal;
}
/*...*/
.ion-alert:before {
    content: "\f101";
}
.ion-alert-circled:before {
    content: "\f100";
}
.ion-android-add:before {
    content: "\f2c7";
}
/*...*/

iconfont 의 참조 방법은 우리가 알고 있는 것과 같으며, 특별한 것이 없습니다. 이러한 방법으로 커스텀 iconfont 를 도입할 수도 있습니다

주의: lib 를 수정하지 마십시오. 남의 것을 함부로 변경하는 것은 좋지 않습니다

###2.구체적인 조작

www 디렉토리下に font 폴더를 신규 생성하고, ttf, woff, eot, svg 를 모두 넣고,然后在我们自己的 www/css/style.css 에서 폰트 파일을 도입합니다:

@font-face {font-family: 'iconfont';
    src: url('../font/iconfont.eot'); /* IE9*/
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/*!!! 이 클래스명은 icon 이어야 합니다*/
.icon{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

특히 주의: 폰트 효과를 설정하는 css 클래스는 반드시icon이라는 이름이어야 합니다. 나중에 이유를 설명합니다

然后就可以在模版 html 中使用这些图标了，但还会遇到一些问题，比如：

[caption id="attachment_855" align="alignnone" width="302"]设置 ion-tab 的 icon-on/off 设置 ion-tab 的 icon-on/off[/caption]

위 그림은 ion-tab 디렉티브에서 커스텀 아이콘을 사용하는 것으로, 폰트 효과 클래스를 icon 으로 명명하는 것은 유사한 디렉티브에서 직접 사용할 수 있도록 하기 위함입니다. 예를 들어:

<ion-tab title="通讯录" icon-on="icon-tongxunlu" icon-off="icon-tongxunluxianxing" href="#/root/contacts">
    <ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>

ionic 은 위의 디렉티브를 자동 처리하여, a>i+span 과 같은 구조를 생성합니다. 아이콘은 i 태그를 통해 표시됩니다:

<i class="icon icon-tongxunluxianxing" ng-if="getIconOff() &amp;&amp; !isTabActive()"></i>

여기서 i 태그는 자동으로 icon 클래스만 가지며, icon 이 아닌 이름의 스타일 클래스는 적용되지 않습니다

P.S.ion-tab 에class="my-icon" 를 추가하는 것을 쉽게 생각할 수 있지만, 안타깝게도, 생성된 i 태그에는class="my-icon" 가 없습니다. 저항은 무효이므로,素直に 클래스명을 icon 으로 변경합시다

###3.만날 가능성이 있는 기타 문제

  1. 아이콘의 사이즈 (치수) 를 어떻게 조정하는가

ionic 의 icon 의 기본font-size 는 32px 이지만, 서드파티 폰트의 초기 사이즈는 통일되어 있지 않으며, 같은font-size でも 다른 사이즈가 표시됩니다. 대응하는 아이콘의 before 를 수정할 수 있습니다. 예를 들어:

    .icon-tongxunluxianxing:before { content: "\e6bf"; font-size: 27px;}

이 폰트의 27px 은 ion-xx 의 32px 너비와 높이와 거의 같으며, 육안으로 미세 조정할 수 있습니다

  1. 아이콘의 수직 중앙 정렬을 어떻게 제어하는가

이는 심각한 문제로, font-size 를 수정한 후, 아이콘이 수직 방향으로 중앙 정렬되지 않게 됩니다. 커스텀 아이콘에line-height: 1 를 적용해야 합니다. 예를 들어:

    .icon:before {
        line-height: 1;
    }

이 문장은 ionic 스타일에서 찾은 것으로, 이론상 이상한 부작용은 없으며, line-height: 100%, line-height: 32px; 보다 더 안전합니다

  1. 아이콘의 위치를 어떻게 미세 조정하는가

line-height 를 설정해도 아직 중앙 정렬할 수 없다는 것을 알 수 있습니다. 이는 과학적이며, 폰트 생성 시 svg 이미지 자체가 중심에서 벗어나 있을 가능성이 있기 때문입니다. 따라서 우연히 이 상황에 직면하며, relative 로 미세 조정해야 합니다:

    .icon-faxian:before { content: "\e607"; font-size: 20px; position: relative; top: 3px;}

좌우가 맞지 않으면left/right 를 미세 조정할 수 있습니다

  1. 아이콘을 어떻게 결합하는가 (badge 와 유사)

아이콘의 모서리에 작은 빨간 점을 추가하고 싶은 경우 (badge 효과와 유사), 이렇게 할 수 있습니다:

    /* 오른쪽 아래 모서리 */
    .icon-badge-rb:before {
        font-size: 16px;
        position: relative;
        bottom: -2px;
    }

템플릿 파일에서 이렇게 사용합니다:

    <i class="icon ion-ios-person positive">
        <span class="icon icon-badge-rb ion-ios-checkmark-outline"></span>
    </i>

효과는 아래 그림과 같습니다:

[caption id="attachment_856" align="alignnone" width="301"]微信의 연락처를 모방 微信의 연락처를 모방[/caption]

三。요약

ionic 은 레이아웃 상세 제어에서 그다지 편리하지 않습니다 (거친 프레임워크 구축은 빠름). 사용할 때 추가의 툴 스타일이 필요할 수 있습니다. 예를 들어:

.mt10 {
    margin-top: 10px;
}

.fz-sm {
    /*기본 16px*/
    font-size: 14px;
}

.icon-sm:before {
    font-size: 20px;
}

조금 복잡한 레이아웃은 grid 로 구현하는 것은 불편하지만, float/relative 등으로 빠르게 구현할 수 있으므로, 툴 스타일을自备하는 것은 여전히 필요합니다

댓글

아직 댓글이 없습니다

댓글 작성