지난번에 개발자 웹사이트에 갔을 때 두 번째로 많이 요청된 항목이 모델러에 사용자 정의 아이콘을 가져오는 것이었습니다. 겉보기에는 글꼴만 추가하면 작동할 것처럼 보일 수 있습니다. 그래서 순수 CSS로 이 작업을 하는 방법을 보여주는 것이 도움이 될 것이라고 생각했습니다. 그러면 커뮤니티에서 미래에 기능으로 추가하기 위한 토대를 마련할 수 있을 것입니다. Mendix 버전. 사용자 정의 아이콘을 만드는 방법을 이해하면 모델러가 현재 글리피콘을 배치할 수 있는 것보다 훨씬 더 많은 곳에 아이콘을 추가할 수 있습니다.
프로젝트에 사용자 정의 아이콘 세트를 추가하려면 두 가지 핵심 요소인 아이콘 글꼴과 모든 클래스를 매핑하는 CSS/Sass 파일이 필요합니다.
아이콘 글꼴
아이콘 글꼴을 선택하거나 만드세요:
인터넷에는 꽤 많은 무료 아이콘 글꼴이 있습니다. Font Awesome과 같은 일부는 무료이며 CSS가 포함된 글꼴 파일을 사용할 준비가 거의 되었습니다. 일부는 글꼴 파일만 있고 다른 일부는 SVG 또는 Illustrator 파일입니다. 가장 사용자 지정 옵션부터 시작해 보겠습니다. 프로젝트에 사용하려는 SVG 아이콘이 있습니다. 이를 위해 다음과 같은 웹사이트에서 나만의 아이콘 글꼴을 만들어야 합니다. Icomoon.
다음은 몇 가지 튜토리얼입니다. 당신이 이것의 모든 것을 안내할 것입니다 처음부터 나만의 아이콘 글꼴 만들기. 자신만의 아이콘 글꼴을 만들면 바로 사용할 수 있는 글꼴을 얻을 수 있을 뿐만 아니라 필요한 클래스가 포함된 CSS 파일도 매핑됩니다.
필요한 파일:
아이콘 글꼴을 만든 후에는 글꼴을 여러 글꼴 파일 유형으로 만들어야 합니다. 모든 브라우저에서 작동하도록 하려면 이러한 유형이 필요합니다. 예를 들어 .eot는 Internet Explorer에서 가장 잘 작동하지만 .woff는 Chrome에서 가장 잘 작동합니다. 다행히도 Font Squirrel의 글꼴 변환기를 사용하여 이러한 모든 파일을 만들 수 있습니다. css 폴더 옆의 폴더에 글꼴 파일을 저장하여 파일 경로를 쉽게 만들 수 있습니다.
CSS/SASS 파일 및 문자 매핑
아이콘 글꼴을 찾았고 필요한 모든 글꼴 파일을 만들었지만 Icomoon과 같은 서비스에서 만들지 않았다면 다음 단계는 약간 지루할 수 있습니다. 여기서 우리는 커뮤니티로서 서로에게 도움이 될 수 있습니다.
모든 아이콘 글꼴 세트에 대해 각 아이콘 CSS 파일을 만들어야 합니다. 여기에는 3개의 요소가 필요합니다. 아래 예에서는 Sass 구문을 사용하여 연결할 수 있도록 합니다. Mendix UI 프레임워크를 사용하고, 깔끔한 아이콘 글꼴인 Linearicons를 사용할 것입니다.
먼저, @font-face로 글꼴 파일을 가져옵니다. 구문은 다음과 같아야 합니다.
@font-face {
font-family: 'Linearicons-Free';
src:url('../fonts/Linearicons-Free.eot?w118d');
src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'),
url('../fonts/Linearicons-Free.woff?w118d') format('woff'),
url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'),
url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg'); font-weight: normal;
font-style: normal;
}둘째, 사용 중인 글꼴을 선언하고 글꼴 크기, 표시, 위치, 줄 높이 등과 같은 기준선 스타일을 설정하는 클래스를 만듭니다. Linearicons의 경우 .lnr 클래스를 사용합니다. 대부분의 경우 아이콘을 사용할 때 Mendix, 아이콘이 텍스트나 버튼보다 앞서기를 원할 것이고, 그래서 :before 가상 클래스에 속성을 배치해야 합니다. 이렇게 하면 여러 아이콘 글꼴을 사용할 수 있으며, 모두 고유한 명명 클래스 이름을 가질 수 있습니다.
.lnr {
&:before {
display: inline-block;
font-family: 'FontAwesome';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
vertical-align: middle;
margin-right: 0;
margin-top: 0;
font-size: 1.5em;
line-height: inherit;
-moz-osx-font-smoothing: grayscale;
}
}마지막으로 각 캐릭터에 대한 클래스 이름을 만들어야 합니다. 아이콘 글꼴에는 대부분 미리 정의된 것이 있는 경우가 많습니다. 각 캐릭터에 대한 클래스 이름이 있어야 합니다.
.lnr-home:before {
content: "\e800";
}2단계에서 보듯이 문자 클래스는 :before 의사 클래스에 배치됩니다. 텍스트 오른쪽에 아이콘이 나타나도록 하려면 이를 수용하기 위해 추가 클래스 선언을 만들 수 있습니다. 다음과 같은 초기 클래스 선언과 문자 맵이 모두 필요합니다.
.lnr-a{
&:after{
…
}
}
.lnr-home-a:after {
content: "\e800";
}프로젝트에 새로운 아이콘 통합
모든 클래스를 저장한 후에는 UI 프레임워크 폴더 구조 내에서 SCSS 부분을 저장해야 합니다. 이 예제에서는 따라하고 싶으시다면 Vanilla 테마를 폴더 구조로 사용하고 있습니다.
- 예를 들어 _linear-icons.scss와 같이 특정 이름으로 저장하면 다른 프로젝트에서 쉽게 선택하여 재사용할 수 있어 유용합니다.
- 테마 > lib > 프로젝트 폴더로 부분 이동
- theme >lib에서 lib.scss 파일을 엽니다.
- 파일 하단에 “@import folder/linear-icons;” 줄을 추가합니다.
- Koala나 다른 Sass 컴파일러가 파일을 감시하고 있어 아이콘을 저장할 때 프로젝트에 추가되도록 하세요.
모델러에서 사용자 정의 아이콘 사용
새 아이콘을 사용하는 것은 다른 클래스를 사용하는 것만큼 쉽습니다. CSS 클래스처럼 Modeler에서 클래스 속성이 있는 곳이라면 어디든 아이콘을 추가할 수 있습니다. 사용자 지정 클래스를 사용하려면 아이콘 글꼴 선언과 사용하려는 문자를 모두 추가해야 합니다.
다운로드할 수 있는 linearicon CSS와 글꼴을 포함했습니다. 이를 템플릿으로 사용하여 여러분만의 아이콘 글꼴 세트를 만들 수 있습니다.