css字体图标的加载

最新推荐文章于 2025-02-05 16:01:46 发布

lgs198722

最新推荐文章于 2025-02-05 16:01:46 发布

阅读量371

点赞数

分类专栏： html5 文章标签： css3 html 前端

本文链接：https://blog.youkuaiyun.com/lgs198722/article/details/122484281

版权

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS字体图标，包括从iconfont和IcoMoon平台获取图标，以及在项目中应用的三个步骤：拷贝生成的文件，定义样式，获取并使用字体编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

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

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}

IcoMoon App - Icon Font, SVG, PDF & PNG GeneratorUsing IcoMoon you can easily search and download vector icons or generate fonts (icon fonts). This tool can also be used for icon set management. It can generate icon fonts, SVGs, PDFs, PNGs and sprites.https://icomoon.io/app/#/select

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 `@font-face`

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1642085650271') format('woff2'),
       url('iconfont.woff?t=1642085650271') format('woff'),
       url('iconfont.ttf?t=1642085650271') format('truetype');
}

第二步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}