CSS 글꼴 아이콘 제작 및 사용에 대한 심층 설명(코드 공유)

이전 기사 "CSS로 애니메이션을 만드는 일반적인 기술을 설명하는 기사(컬렉션) "에서 CSS로 애니메이션을 만드는 일반적인 기술에 대해 배웠습니다. 다음 기사는 CSS 글꼴 아이콘의 제작 및 사용을 이해하는 데 도움이 될 것입니다.

CSS 글꼴 아이콘 제작 및 사용

프로젝트 개발 과정에서 일부 아이콘을 자주 사용하게 됩니다. 하지만 이러한 아이콘을 사용하면 종종 왜곡이 발생하고, 사진이 많을수록 페이지 로드 속도가 느려집니다. 따라서 글꼴 아이콘을 사용하여 아이콘을 표시할 수 있으며 이는 왜곡 문제를 해결할 뿐만 아니라 이미지가 리소스를 차지하는 문제도 해결합니다.

1. 폰트 아이콘 만드는 방법

1. 필요한 아이콘을 인터넷에서 다운로드하세요(svg 형식). 여기서는 웹사이트 제작을 거의 다 다루는 "알리바바 아이콘 라이브러리"를 추천합니다. 필요한 모든 아이콘은 무료로 다운로드할 수 있습니다(형식, 크기, 색상 모두 맞춤 설정 가능). svg格式）,在这里推荐一个网站 "阿里巴巴图标库",这里面几乎囊括了网站制作中所有需要的图标，而且是免费下载，（格式，大小，颜色都可以自定义）。

阿里巴巴图标库的地址：https://www.iconfont.cn/

2、我们打开“iconmoon”这个网站（当然阿里巴巴图标库这个网站也可以制作）

https://icomoon.io/

找到右上角这个红色的按钮，点击它

3、找到左上角这个按钮，点击import icons这个按钮，上传你的svg格式的图标。

4、当图标上传完后，图标的背景是灰色的，这个时候点击你需要的图标（选中后的背景会变白）。

5、点击页面右下角的

这个按钮，跳转页面后，再点击

这个下载按钮，等待下载完成。

二、如何使用字体图标

1、解压下载后的文件夹，我们需要的是fonts文件夹和style.css, 将这个文件放入你的项目中,style.css文件中引入了字体文件，所以会有路径，这个时候你在使用的时候要注意路径问题，代码如下：（这里的多种字体文件是为了兼容浏览器）

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?snsrp8');
  src:  url('../fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?snsrp8') format('truetype'),
    url('../fonts/icomoon.woff?snsrp8') format('woff'),
    url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

2、在页面中，我们只要给一个元素添加相应的类名就行，因为在style.css

Alibaba 아이콘 라이브러리 주소: https://www.iconfont.cn/

https://icomoon.io/

오른쪽 상단의 빨간 버튼을 찾아 클릭해주세요

3. 왼쪽 상단을 찾으세요 이 버튼을 클릭하세요. 아이콘 가져오기 버튼을 클릭하여 < 코드의 아이콘>svg 형식.

4. 아이콘이 업로드되면 아이콘의 배경이 회색이 됩니다. 이때 필요한 아이콘을 클릭하세요. (선택한 배경은 흰색으로 변합니다.)

5.

이 버튼은 페이지로 이동한 후

.icon-account:before {
content: "\e900";
}
.icon-caifu:before {
content: "\e901";
}
.icon-edit:before {
content: "\e902";
}

<span class="icon-account"></span>

위 내용은 CSS 글꼴 아이콘 제작 및 사용에 대한 심층 설명(코드 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!