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. elasticsearch -- 问题纪录

    报错1: [1]: max file descriptors [65535] for elasticsearch process is too low, increase to at least [6 ...

  2. EasyUI Pagination 分页分页布局定义 显示按钮布局

    //分页布局定义.该属性自版本 1.3.5 起可用.//布局项目包括一个或多个下列值://1.list:页面尺寸列表.//2.sep:页面按钮分割.//3.first:第一个按钮.//4.prev:前 ...

  3. C++ 运算符重载四（自定义数组类）

    //自定义数组类 #include<iostream> using namespace std; //分析:能获取数组长度,添加元素,删除元素,修改元素 //要求重载[],=,==,!=运 ...

  4. php 显示一个干净的，易被解析的json

    header("Content-type: text/html; charset=utf-8"); //试着从数据库里读取一条数据放进来 $con = mysql_connect( ...

  5. 【cf490】D. Chocolate（素数定理）

    http://codeforces.com/contest/490/problem/D 好神的一题,不会做.. 其实就是将所有的质因子找出来,满足: 最终的所有质因子的乘积相等 但是我们只能操作质因子 ...

  6. 【BZOJ】1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏（刷水严重）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1666 这种我就不说了.. #include <cstdio> #include < ...

  7. uc 调试

    UC浏览器开发者版 目录[隐藏] 1 关于RI 2 准备工作 3 调试方式 相关下载 1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机 ...

  8. hdu 4685(匹配+强连通分量)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4685 思路:想了好久,终于想明白了,懒得写了,直接copy大牛的思路了,写的非常好! 做法是先求一次最 ...

  9. 去除 \ufeff

    语言:python 编程工具:pycharm 硬件环境:win10 64位 读取文件过程中发现一个问题:已有记事本文件(非空),转码 UTF-8,复制到pycharm中,在开始位置打印结果会出现  \ ...

  10. 常用CGI环境变量 转自https://blog.csdn.net/acmdream/article/details/58070066

    CGI环境变量名称 说明 REQUEST_METHOD 请求类型,如“GET”或“POST” CONTENT_TYPE 被发送数据的类型 CONTENT_LENGTH 客户端向标准输入设备发送的数据长 ...