Font awesome小图标

最新推荐文章于 2024-08-29 14:26:44 发布

小鬼web

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量501

点赞数

分类专栏：其他文章标签：前端图标 awesome

本文链接：https://blog.csdn.net/fenghui187/article/details/54141811

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在编程的过程中我们经常会需要使用一些小图标，Font awesome无疑是一个很好的工具，它提供了海量的可供缩放的矢量图标，具体的可访问它的官网。

它的使用也很简单，只需要在你的html页面引入font-awesome.css,然后当你需要引用小图标的地方加上类class="fa fa-x"（x为你所需要的小图标的名字，具体的可参照官网），

下面是我自己写的一个简单的实例，其中我对某些样式做了重写。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/>
      <style>
      
         li{
            list-style: none;
         }
         li .fa{
            color:red;
            color:lightblue;
            cursor: pointer;
         }
         li .fa:hover{
            color:red;
         }
         li .fa{
            font-size: 30px;
         }
      </style>
   </head>
   <body>
      <ul>
         <li><span class="fa fa-search">搜索</span></li>
         <li><span class="fa fa-bars">菜单</span></li>
         <li><span class="fa fa-bomb">炸弹</span></li>
         <li><span class="fa fa-refresh fa-spin"></span><span class="fa">更新</span></li>
         <li><span class="fa fa-glass"></span></li>
      </ul>
   </body>
</html>

小鬼web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Font awesome小图标

在编程的过程中我们经常会需要使用一些小图标，Font awesome无疑是一个很好的工具，它提供了海量的可供缩放的矢量图标，具体的可访问它的官网。它的使用也很简单，只需要在你的html页面引入font-awesome.css,然后当你需要引用小图标的地方加上类class="fa fa-x"（x为你所需要的小图标的名字，具体的可参照官网），下面是我自己写的一个简单的实例，其中我对某些样式做了
复制链接

扫一扫

专栏目录