如何在前端界面中正确食用小图标(html+css)

图标网址入口:[Icon Font & SVG Icon Sets ❍ IcoMoon](https://www.iconfont.cn/)
使用步骤:
  • 在自己的项目下建一个名为fonts的文件,目的是存储小图标。
  • 进入首页选中自己想要的图标并点击Generate Font

  • 点击下载

  • 下载的是压缩文件,故先进行解压。随便放在哪个路径都行。
  • 将解压后的文件打开,点击fonts,将红框中的四个文件全部复制粘贴在自己项目下的fonts文件中。

  • 进入icomoon,将想要的图标进行复制粘贴在HTML中,如图所示。

  • 打开之前解压的文件,打开为记事本打开style.css,将@font-face{}全部内容复制粘贴在项目中的css文件中。 注:复制过程中应注意url中的路径问题,根据自己所建立的文件位置进行相应的调整 !

  • 最后一步对在css中对图标进行调用,以如下图中的代码为例。

.form i{
    /* 对图标进行调用 */
    font-family: icomoon;
    font-style: normal; 
    color:#ccc;
}
代码展示:

html中的内容:

<div class="form">
    <input type="text" placeholder="扫描仪">
    <button><i></i></button>
</div>

css中的内容:

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

.form i{
    /* 对图标进行调用 */
    font-family: icomoon;
    font-style: normal; 
    color:#ccc;
}
最后修改:2021 年 12 月 23 日
如果觉得我的文章对你有用,请随意赞赏