Layui에 아이콘을 추가하는 방법

layui에 아이콘을 추가하는 방법: 먼저 iconfont 공식 웹사이트를 열고 원하는 글꼴 아이콘 라이브러리를 선택한 다음 프로젝트에서 "로컬에 다운로드"를 클릭하고 압축 해제된 파일을 로컬 프로젝트에 복사하세요. 로컬 프로젝트에 코드만 입력하세요.

권장: "layUI Tutorial"

layui2.0 및 이전 버전의 글꼴 아이콘은 프로젝트의 요구 사항을 충족할 수 없으므로 아이콘은 Alibaba www.iconfont.cn에서 제공되므로 프로젝트 글꼴을 수동으로 강화했습니다. . 아이콘 라이브러리는 다음과 같이 기록됩니다.

1. 장바구니에 글꼴 아이콘 추가

www.iconfont.cn을 열고 원하는 글꼴 아이콘 라이브러리를 선택한 다음 그림과 같이 "라이브러리"(예: 글꼴 장바구니 아이콘)에 추가하세요. 아래 그림

2 , 프로젝트에 아이콘 추가

오른쪽의 "장바구니 아이콘"을 클릭한 후, 선택한 글꼴 아이콘을 프로젝트에 추가하세요. 향후 확장을 용이하게 하려면 새 프로젝트를 생성하는 것이 좋습니다.

3. 코드 다운로드 및 도입

프로젝트에서 "로컬에 다운로드"를 클릭한 다음 압축이 풀린 파일을 로컬 프로젝트에 복사하고 iconfont.css 파일을 로컬로 가져옵니다.

4. 글꼴 아이콘

을 선택하고 브라우저에서 데모_unicode.html 파일을 열고 관련 HTML 코드를 로컬 프로젝트에 추가합니다.
예를 들어 3

layui라면 아름다운 스타일을 위해 iconfont.css의 수정된 CSS 코드를 다음과 같이 수정하시면 됩니다

.iconfont{font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
display: inline-block;
-webkit-text-stroke-width: 0.2px;
font-size:14px;
transition: all 0.4s linear 0s;-o-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;
}

5. 나중에 글꼴 아이콘을 추가해야 합니다. 위 단계를 반복하여 Alibaba iconfont에서 프로젝트 코드를 로컬 영역으로 직접 다운로드하고 이전 코드(iconfont.css 제외)를 덮어쓴 다음 새 글꼴 아이콘을 사용할 수 있습니다.

위 내용은 Layui에 아이콘을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!