29.html的iconfont（图标字体）

最新推荐文章于 2024-04-23 20:45:44 发布

Keeling1720

最新推荐文章于 2024-04-23 20:45:44 发布

阅读量759

点赞数 1

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/116163192

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

文章目录

图标字体（iconfont）

图标字体（iconfont)
      -在网页中经常需要使用一些图标，可以通过图片来引入图标(但是图片本身较大，且不灵活）
      -因此，我们可以将图标直接设置为字体，然后使用font-face的形式将字体导入
      -如此，我们就可以通过字体的形式使用图标

推荐下载链接一（fontawesome）

推荐下载链接：https://fontawesome.com/
进入后，点击start for free
在这里插入图片描述
往下拉，找到并点击Download进行下载。

往下拉，点击Download…就可以下载了。

下载完成后，解压他的压缩包，然后把他里面的css和webfonts放到你的项目下面。（注意：css文件夹必须和webfonts放在同一个目录下）
在这里插入图片描述
之后，我们在项目中引入all.css文件并使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont</title>
    <!--引入all.css文件-->
    <link rel="stylesheet" href="./css/all.css">
</head>
<body>
	<!--class里前面的fas是固定的，后边的则根据需要写即可，具体参考-->
	<i class="fas fa-baby"></i>
</body>
</html>

显示如下：
在这里插入图片描述
注意：如果fas不行的话，就用fab，一般固定写法都是fas和fab开头。
如果你想要让图标大点，只需要设置其的font-size属性，改颜色直接使用color属性即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont</title>
    <link rel="stylesheet" href="./css/all.css">
</head>
<body>
    <i class="fas fa-baby" style="font-size: 50px;color: bisque"></i>
    <i class="fas fa-otter"></i>
</body>
</html>

在这里插入图片描述

iconfont的其他用法（阿里巴巴图标库）

其实另一个也可以，但是我用阿里比较多。
用法：自己设置li前面的图标：
先解说吧，下面li::before中的font-family是固定的iconfont。然后content是多少就要你自己去css文件看了。（我用的是icon-gedan，所以取值’\e601’)

在这里插入图片描述
为什么font-family要写iconfont我也说一下吧，因为在css文件中，他给这些图标字体的取名就是用的iconfont（前面有讲）：

当然你也可以自己把他名字改了，方法也很简单，只需要修改他的font-family的值就可以了（只修改@font-face中font-family的值的话，iconfont照样可以继续用，如果就是不想用iconfont这个名字，那就把下面.iconfont里面的fontfamily的值也改了）。
在这里插入图片描述
回归正题，看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont的其他用法</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        li{
            /*关掉li前面的小黑点*/
            list-style: none;
        }
		/*设置li前面的图标*/
        li::before{
            /*使用阿里巴巴失恋图库必须用这个*/
            font-family: iconfont;
            /*对应的图标的content值，具体在css文件中找*/
            content: "\e601";
            font-weight: 900;
        }
    </style>
</head>
<body>
    <ul>
        <li>日照香炉生紫烟</li>
        <li>遥望瀑布挂前川</li>
        <li>飞流直下三千尺</li>
        <li>疑是银河落九天</li>
    </ul>
</body>
</html>

显示如下：
在这里插入图片描述
当然也可以设置他的颜色，比如我在li::before中添加一个color:orange; 那么显示如下：

Keeling1720

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
29.html的iconfont（图标字体）

文章目录图标字体（iconfont）推荐下载链接一（fontawesome）推荐下载链接二（阿里巴巴矢量图标库）iconfont的其他用法（阿里巴巴图标库）图标字体（iconfont）图标字体（iconfont)      -在网页中经常需要使用一些图标，可以通过图片来引入图标(但是图片本身较大，且不灵活）      -因此，我们可以将图标直接设置为字体，然后使用font-face
复制链接

扫一扫