字体图标----------前端必备良药

最新推荐文章于 2024-11-14 20:33:24 发布

原创最新推荐文章于 2024-11-14 20:33:24 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html+css

本文详细介绍如何从IconMoon网站选择并下载字体图标，包括在CSS中引入字体文件、使用图标的具体步骤，以及如何追加更多图标到现有项目中。

字体图标

1.进入iconmoon 选择字体图标下载解压文件夹

2.css中引入代码

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


/*注意 要是创建css文件夹 里面的css文件 */

则引入的代码
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?7kkyc2');
  src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

3.将fonts文件夹下载至项目内

4.1打开demo.html 复制小方块 (粘贴之后看不到但是存在)

复制小方块 (粘贴之后看不到但是存在)  加入
<span> </span>
css代码
span{
	font-family:"icomoon";  //重点  别忘了
}

4.2打开demo.html 复制小方块之前的数字例如 eac6

<span></span>

span::before{
	content:"\eac6";   //重点   注意是  反斜杠  \
	font-family:"icomoon";   //重点  别忘了
}

字体图片追加

1.打开https://icomoon.io/app/#/select

将自己的selection.json文件拉拽至箭头处点击yes

在这里插入图片描述

3.追加另外的图标再次下载解压文件夹重新替换文件夹还有 fonts文件夹（别忘了）