css字体图标的实现

css字体图标的实现

1、首先进入  Iconfont-阿里巴巴矢量图标库

2、 下载后再进入创建字体图标的网站icomoon

第一步:点击IcoMoon app 进入创建字体图标界面

第二步: 点击 import icons导入下载的SVG文件 ,然后在untitled set中选中导入的svg文件

最后点击generate font创建字体图标

第三步:下载生成的字体图标压缩包

第四步:打开字体图标压缩包中的 demo.html 文件可以看到对应字体图标的实例,下图红框内代表字体图标对应的类名


第五步:在代码中使用字体图标,只需要把字体图标压缩包中的 fonts文件夹和 style.css 文件放到同一目录下然后在代码中连接 style.css 文件在标签中使用相应类即可

第六步:效果展示,可以通过改变style.css 文件中对应类的 color 和font-size 来改变字体图标的颜色和大小

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。