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

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

图标网址入口：Icon Font & SVG Icon Sets ❍ IcoMoon

使用步骤：

• 在自己的项目下建一个名为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;
}

文章原地址：如何在前端界面中正确食用小图标（html+css） - BerylYing