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>

Font Awesome-用CSS实现各种小图标icon的更多相关文章

  1. 3D深色金属哥特3D项目工具小图标icon高清设计素材

    3D深色金属哥特3D项目工具小图标icon高清设计素材

  2. CSS sprites(css 精灵):将小图标整合到一张图片上

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

  3. css 文字与小图标对齐

    .icon { display: inline-block; width:20px; height:20px; background: url(delete.png) no-repeat center ...

  4. HTML中用自定义字体实现小图标icon(不是原作, 只是一个研究笔记)

    最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文 ...

  5. font awesome 页面小图标

    font awesome 页面小图标 前段时间做页面,从网上查找资料,发现了一个好用的工具,就是font awesome奥森图标,使用了一下,发现非常方便,而且很灵活,纯css编写,可以和bootst ...

  6. CSS之fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  7. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  8. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  9. 浅谈字体小图标font awesome，iconfont，svg各自优缺点

    三种都是矢量图(即放大不失真),但是个自又有个自的优缺点, 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font ...

随机推荐

  1. Dalvikvm工具

    dalvikvm:创建一个虚拟机并运行參数指定的java类. 1.新建一个java文件:例如以下: public class Test_07_22 { public static void main( ...

  2. 除去Scala的糖衣(13) -- Default Parameter Value

    欢迎关注我的新博客地址:http://cuipengfei.me/ 好久没有写博客了,上一次更新竟然是一月份. 说工作忙都是借口,咋有空看美剧呢. 这半年荒废掉博客说到底就是懒,惯性的懒惰.写博客这事 ...

  3. (转)FS_S5PC100平台上Linux Camera驱动开发详解（一） .

     平台linuxstructlinux内核videocam 说明:        理解摄像头驱动需要四个前提:        1)摄像头基本的工作原理和S5PC100集成的Camera控制器的工作原理 ...

  4. 【BZOJ】1057: [ZJOI2007]棋盘制作（单调栈）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1057 同某一题差不多?记不清是哪题了.. 就是每一行进行单调栈维护递增的高度,在进栈和出栈维护一下长 ...

  5. 小结：hash

    概要: 判重的时候可以用手写hash,也可以用stl中的map,手写hash的好处是快,解决冲突的方案较好,map慢.但是手写hash要求的空间高,而且有时处理得不好的话会wa. 注意及技巧: 注意的 ...

  6. PHP常用技术文之文件操作和目录操作总结

    <?php header("content-type:text/html;charset=utf-8"); /* *声明一个函数,传入文件名获取文件属性 *@param st ...

  7. Boost库初见

    Boost库是一个功能强大.构造精巧.跨平台.开源并且完全免费的C++库,有C++"准"标准库的美称! Boost有着与其它程序库(如MFC等)无法比拟的优点. Boost库采用了 ...

  8. 用DX9画三角形，三个顶点要求

      用DX9画三角形,三个顶点的顺序有要求吗下面是全部代码,在 InitVB 函数中被注释掉的数组是我写的,没注释掉的是书上的代码,经过试验我的坐标不能显示出图形,而书上的坐标可以,这是为什么? #i ...

  9. List remove及ConcurrentModificationException异常

    参考:http://blog.csdn.net/androidboy365/article/details/50540202/ 解决方案 // 1 使用Iterator提供的remove方法,用于删除 ...

  10. [Android Tips] 17. 查看 APK 签名信息

    从 APK 文件中获取签名信息 方法一 $ keytool -list -printcert -jarfile <path of APK> 方法二 解压 APK 文件,释放出 META-I ...