css字体图标的实现

css字体图标的实现

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

css字体图标的实现_第1张图片

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

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

css字体图标的实现_第2张图片

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

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

css字体图标的实现_第3张图片

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

css字体图标的实现_第4张图片

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


css字体图标的实现_第5张图片

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

css字体图标的实现_第6张图片

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

css字体图标的实现_第7张图片

你可能感兴趣的:(css字体图标的实现)