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. OSX监听全局键盘按下事件并捕获事件源的硬件接口位置

    在OSX系统全局监听键盘的按下事件,并可以捕获事件源的硬件的接口位置,用于区分是哪个键盘产生的事件.下面的代码只是以键盘为例子,其实是可以适用于其他输入外设的.如有需要可搜索相关外设的匹配字典的创建代 ...

  2. 07 Test结构

    Test 有多种实现方式, [ 等价于 test, 并且 [ 是一个内建命令, 效率很高 另外, [[]] 也是测试, [[]]结构比bash[]更灵活, 这是一个扩展test命令, 从ksh88继承 ...

  3. SSIS 自测题-控制流控件类

    说明:以下是自己的理解答案,不是标准的答案,如有不妥烦请指出.         有些题目暂时没有答案,有知道的请留言,互相学习,一起进步. 62.描述一下 Execute SQL Task 的作用,在 ...

  4. javascript 屏蔽F5，BackSpace等各种按键

    function DisableF5(){ with (event){ // F5 and Ctrl+R if (keyCode==116 || (ctrlKey && keyCode ...

  5. POST GET 请求示例

    HTTP GET 请求代码: HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://www.baidu.com ...

  6. 【BZOJ】1045: [HAOI2008]糖果传递（中位数）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1045 白书上有讲 没ac的坑点在,数据范围n<=1,000,000 #include < ...

  7. 【BZOJ】1653: [Usaco2006 Feb]Backward Digit Sums（暴力）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1653 看了题解才会的..T_T 我们直接枚举每一种情况(这里用next_permutation,全排 ...

  8. [转]Tcpcopy简介与实战

    Tcpcopy简介 TCPCopy是一种请求复制(所有基于tcp的packets)工具 ,其功能是复制在线数据包,修改TCP/IP头部信息,发送给测试服务器,达到欺骗测试服务器的TCP 程序的目的,从 ...

  9. Spring Cache 自定义注解

    1.在使用spring cache注解如cacheable.cacheevict.cacheput过程中有一些问题: 比如,我们在查到一个list后,可以将list缓存到一个键对应的区域里:当新增.修 ...

  10. 【读书笔记】iOS-ARC-环境下怎样查看引用计数的变化

    一.新建立一个project.用于測试引用计数的变化. 二,找到例如以下路径Build Phases---->Compile Sources---->AppDelegate.m 三,选中A ...