css之字体图标

最新推荐文章于 2024-05-02 18:27:43 发布

小黑不白爱吃糖

最新推荐文章于 2024-05-02 18:27:43 发布

阅读量225

点赞数 1

分类专栏： css及框架 html 前端文章标签： css html

本文链接：https://blog.csdn.net/qq_41860476/article/details/108244319

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

css及框架

4 篇文章 0 订阅

订阅专栏

字体图标的使用

打开提供字体图标的网址，这里给大家推荐一个https://www.iconfont.cn
选择或搜索你需要的字体图标，加入购物车，如下图所示
选后后点击购物车图标，找到下方的下载代码，点击

在这里插入图片描述
4. 下载至本地并解压

在这里插入图片描述

在这里插入图片描述
6.下载的压缩包里有使用的文档demo_index.html,这里使用的是font-class引用

将压缩包里的iconfont.css拷贝至你的项目目录中
在html里head标签中引用这个外部css文件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
</head>

3.依据引用的外部css文件iconfont.css里的图标class,在html里添加你需要的对应的图标的class值，如果你想要修改class名字不要忘了在css文件里也做相应修改。（下图所示最后一个li标签的icon-last便是自己想要设置的class名，同样在css文件中，可见做了相应修改）

在这里插入图片描述
附效果图

小黑不白爱吃糖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css之字体图标

字体图标的使用打开提供字体图标的网址，这里给大家推荐一个https://www.iconfont.cn选择或搜索你需要的字体图标，加入购物车，如下图所示选后后点击购物车图标，找到下方的下载代码，点击4. 下载至本地并解压6.下载的压缩包里有使用的文档demo_index.html,这里使用的是font-class引用将压缩包里的iconfont.css拷贝至你的项目目录中在html里head标签中引用这个外部css文件<head> <met
复制链接

扫一扫