font awesome矢量字体使用

最新推荐文章于 2024-09-06 22:20:29 发布

鱼空

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量205

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_69502730/article/details/127229789

版权

官网地址：Font Awesome 中文网 – | 字体图标

设置字体图标大小

awesome 是一种字体，控制图标的大小，是通过 font-size 来实现的，before 字体大小 font-size 继承父亲。找到对应的元素，修改 font-size 就可以实现控制图标大小了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .fa-car {
        color: pink;
      }
      .box {
        font-size: 50px;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"
    />
  </head>
  <body>
    <div class="box">
      <i class="fa fa-car"></i>
    </div>
  </body>
</html>

效果

鱼空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
font awesome矢量字体使用

awesome 是一种字体，控制图标的大小，是通过 font-size 来实现的，before 字体大小 font-size 继承父亲。找到对应的元素，修改 font-size 就可以实现控制图标大小了。
复制链接

扫一扫