初入WEB前端（10）CSS 图标字体在网页里插入一行Otto

最新推荐文章于 2022-10-12 10:33:12 发布

宋辰轩

最新推荐文章于 2022-10-12 10:33:12 发布

阅读量284

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107041466

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.图标字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/css/all.css">
</head>
<body>
    <!-- 图标字体
           网页中需要使用一些小型的图标（如购物车图标）  
           我们可以使用图片，但图片本身比较大，而且不灵活
           在使用图标时，我们还可以将图标设置为字体，通过font-face的形式来对字体进行引入

           在https://fontawesome.com/去下载
           解压后吧css和webfonts引入项目中
           把all.css（all.css）在css里引入到网页中

           使用方法：直接用i标签就行
           不是fas就是fab，后面的在文档里查
        -->
    
    <i class="fas fa-bell"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>
           <i class="fab fa-accessible-icon"></i>

</body>
</html>

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

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（10）CSS 图标字体在网页里插入一行Otto

1.图标字体<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=".
复制链接

扫一扫