自定义CSS的Icon图标

最新推荐文章于 2025-09-26 00:48:36 发布

原创最新推荐文章于 2025-09-26 00:48:36 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在项目中加载并使用图标字体，包括下载文件、配置CSS代码及在HTML页面上的正确应用方法。

http://note.youdao.com/noteshare?id=a957d57709fe80c5f381b0a947254b44
在这里插入图片描述

这些是下载来的文件

放到项目下面

在组件应用，加上后面这两段CSS代码

@font-face {
    font-family: 'iconfont';
    src: url(FontIcon/font_pause/iconfont.eot);
    src: url('FontIcon/font_pause/iconfont.eot?#iefix') format('embedded-opentype'),
        url('FontIcon/font_pause/iconfont.woff2') format('woff2'),
        url('FontIcon/font_pause/iconfont.woff') format('woff'),
        url('FontIcon/font_pause/iconfont.ttf') format('truetype'),
        url('FontIcon/font_pause/iconfont.svg#iconfont') format('svg');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }