IconFont 图标制作和使用

时间:2024-04-15 19:54:17

一、制作:IcoMoon

这个教程一搜一大把,是很方便快捷的一种方式,提供上传、编辑或者选择IcoMoon-Free下载可以直接拿来用了。 
网址:https://icomoon.io/app/

上传需要制作成iconfont的svg图片,点击import iconts--generate font--download

二、使用方法

使用步骤如下:

第一步:引入项目下面生成的fontclass代码:

<link rel="stylesheet" type="text/css" href="./iconfont.css">

第二步:在fonts文件夹引入font字体文件

例如icomoon.ttf

第三步:挑选相应图标并获取类名,应用于页面:

<i class="iconfont icon-xxx"></i>