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. librtmp将本地FLV文件发布到RTMP流媒体服务器

    没有用到ffmpeg库 可以将本地FLV文件发布到RTMP流媒体服务器 使用librtmp发布RTMP流可以使用两种API:RTMP_SendPacket()和RTMP_Write(). 使用RTMP ...

  2. SQL简明教程系列15 创建索引

    CREATE INDEX用于在表中创建索引. 索引使数据库应用程序可以更快地查找数据. 注:更新一个包含索引的表比更新一个没有索引的表更多的时间,这是由于索引本身也需要更新.因此,理想的做法是仅仅在常 ...

  3. python ascii codec can't decode

    提示错误: UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 240: ordinal not in range ...

  4. 【转】H5页面的测试点总结

    在此对H5页面的测试点(以及容易出问题的点)  1.业务逻辑相关  除基本的功能测试之外,H5页面的测试,需要关注以下几点:  1.1 登陆  目前H5与native各个客户端都做了互通,所以大家在测 ...

  5. 关于Unity中的摄像机

    摄像机是挂载Camera组件的能把3D世界物体拍摄成2D画面显示到屏幕上面的节点,角度不一样,位置不一样,拍摄出来的东西就不一样. Clear Flags:没有物体的时候,摄像机拍摄出的屏幕要绘制什么 ...

  6. Service层事务不能回滚的解决方式

    1.在service方法里面如果对异常进行了捕获的话,该事务是不会进行回滚的        默认spring事务只在发生未被捕获的 runtimeexcetpion时才回滚.          spr ...

  7. 【BZOJ】1016: [JSOI2008]最小生成树计数（kruskal+特殊的技巧）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1016 想也想不到QAQ 首先想不到的是:题目有说,具有相同权值的边不会超过10条. 其次:老是去想组 ...

  8. LPCTSTR —— 摘自百度百科

    LPCTSTR用来表示字符是否使用UNICODE. 如果程序定义了UNICODE或者其他相关的宏,那么这个字符或者字符串将被作为UNICODE字符串,否则就是标准的ANSI字符串. 类型理解:L,表示 ...

  9. 通过代码注册COM、DLL组件

    注册代码如下:  C++ Code  1234567891011121314151617181920212223242526272829303132333435363738   // //====== ...

  10. 一、Android Studio入门——Eclipse快捷键配置

    [Studio总体介绍] 第一个是运行. 第二个是Debug.  是Studio的设置界面.   工程的配置.   Sync,更改配置.导入JAR包,都会去Sync一次.   SDK Manager. ...