단일 위젯에 글꼴 아이콘 포함

하나의 위젯만 글꼴 아이콘에 액세스할 수 있도록 하려면 단일 위젯에 글꼴 아이콘을 포함합니다.

시작하기 전에

필요한 역할: admin 또는 sp_admin

이 태스크 정보

특정 위젯에 아이콘을 추가하면 아이콘의 범위가 유지되고 페이지의 다른 CSS를 방해하지 않습니다.

프로시저

1. 플랫폼 UI에서 서비스 포털 > 위젯을 클릭한 다음, 아이콘을 추가할 위젯을 클릭합니다.
2. 개별 아이콘 파일을 위젯 기록에 첨부합니다.
3. HTML 템플릿에는 다음과 같은 내용이 포함됩니다.

   <div>
   <i class='font-family'>icon_name</i> you did it!
   </div>

   클래스가 CSS에서 호출된 글꼴 패밀리와 정확히 동일한지 확인합니다. 예를 들어 <i class='material-icons'> CSS에 포함된 .material-icons 와 동일해야 합니다. icon_name 첨부한 파일의 이름과 일치해야 합니다.

4. 위젯의 CSS 필드에서 font-icon 정의에 대한 CSS를 추가합니다.

   대부분의 글꼴-아이콘 세트에는 아래에 사용된 재질 아이콘과 유사한 CSS 파일이 포함되어 있습니다. 첨부 파일의 sys_id CSS의 src 로 사용합니다. 예:

   /* fallback */
   @font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
   }
   
   .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;
   
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
   
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
   
     /* Support for IE. */
     font-feature-settings: 'liga';
   }

결과

위젯 또는 위젯 인스턴스에서 선택할 수 있는 아이콘입니다. 예:

다음에 수행할 작업

위젯 전체에서 사용자 정의 글꼴-아이콘을 사용하려면 페이지에 아이콘을 추가하거나 위젯 의존성으로 만드십시오.

관련 태스크

• 페이지에 글꼴 아이콘 포함
• 위젯 의존성으로 글꼴 아이콘 포함