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

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

시작하기 전에

필요한 역할: 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 필드에서 글꼴 아이콘 정의에 대한 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';
   }

결과

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

다음에 수행할 작업

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

관련 태스크

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