zoukankan      html  css  js  c++  java
  • Font Awesome-用CSS实现各种小图标icon

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。官网:http://fontawesome.dashgame.com/

    下面的代码是我自己整理的一些网页中常用的小图标,更多图标请访问官网查看详情。

    font-awesome.min.css 百度网盘下载链接: https://pan.baidu.com/s/1g3J7dCmkgraqJCA1W6HouA  密码:27f4

    <html>
    <head>
       <meta charset="UTF-8" />
       <title>Font Awesome-用CSS实现各种小图标icon</title>
       <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
       <style>
          .fa{
             color: #4CA6FF;
             font-size: 20px;
          }
          span{
             padding: 20px;
          }
       </style>
    
    </head>
    
    <body>
    
    <p>
       <span>点赞</span>
       <i class="fa fa-thumbs-o-up"></i>
       <i class="fa fa-thumbs-up"></i>
    
       <span>点踩</span>
       <i class="fa fa-thumbs-o-down"></i>
       <i class="fa fa-thumbs-down"></i>
    
       <span>书签</span>
       <i class="fa fa-bookmark-o"></i>
       <i class="fa fa-bookmark"></i>
    
       <span>收藏</span>
       <i class="fa fa-heart-o"></i>
       <i class="fa fa-heart"></i>
    </p>
    
    <p>
       <span>编辑</span>
       <i class="fa fa-edit"></i>
    
       <span>邮件</span>
       <i class="fa fa-envelope-o"></i>
       <i class="fa fa-envelope"></i>
    
       <span>文件夹</span>
       <i class="fa fa-folder-o"></i>
       <i class="fa fa-folder"></i>
    
       <span>文件夹打开</span>
       <i class="fa fa-folder-open-o"></i>
       <i class="fa fa-folder-open"></i>
    </p>
    
    <p>
       <span>回复</span>
       <i class="fa fa-mail-reply"></i>
       <i class="fa fa-mail-reply-all"></i>
    
       <span>语音</span>
       <i class="fa fa-microphone"></i>
       <i class="fa fa-microphone-slash"></i>
    
       <span>引用</span>
       <i class="fa fa-quote-left"></i>
       <i class="fa fa-quote-right"></i>
    
       <span>五角星</span>
       <i class="fa fa-star-o"></i>
       <i class="fa fa-star-half-empty"></i>
       <i class="fa fa-star"></i>
    </p>
    
    <p>
       <span>标签</span>
       <i class="fa fa-tag"></i>
       <i class="fa fa-tags"></i>
    
       <span>详情</span>
       <i class="fa fa-file-text-o"></i>
       <i class="fa fa-file-text"></i>
    
       <span>文件</span>
       <i class="fa fa-file-o"></i>
       <i class="fa fa-file"></i>
    
       <span>分享</span>
       <i class="fa fa-share-square-o"></i>
       <i class="fa fa-share-square"></i>
    </p>
    
    <p>
       <span>铅笔</span>
       <i class="fa fa-pencil-square-o"></i>
       <i class="fa fa-pencil-square"></i>
    
       <span>上传和下载</span>
       <i class="fa fa-cloud-upload"></i>
       <i class="fa fa-cloud-download"></i>
    </p>
    </body>
    </html>

    image.png

     

  • 相关阅读:
    java线程
    面向切面编程
    控制反转IOC与依赖注入DI
    phpexecel 导入导出,格式
    PHPExcel设置数据格式的几种方法
    九度oj 题目1416:猴子吃坚果
    九度oj 题目1397:查找数段
    poj 1065 Wooden Sticks
    poj 3181 Dollar Dayz
    poj 1742 Coins
  • 原文地址:https://www.cnblogs.com/rxbook/p/9106462.html
Copyright © 2011-2022 走看看