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. SQL on Hadoop 的真相（1）

    转自:http://blog.jobbole.com/86710/ 这是一组系列博文,目的是详尽介绍 SQL-on-Hadoop .本系列的第一篇会介绍 Hadoop 系统的存储引擎和在线事务处理(简 ...

  2. .NET Entity Framework(EF)使用SqlQuery直接操作SQL查询语句或者执行过程

    Entity Framework是微软出品的高级ORM框架,大多数.NET开发者对这个ORM框架应该不会陌生.本文主要罗列在.NET(ASP.NET/WINFORM)应用程序开发中使用Entity F ...

  3. UIWindow小记

    If you choose to create a window in Interface Builder, be sure to select the Full Screen at Launch o ...

  4. SQL SERVER 服务启动失败

    好久没用SQL SERVER了.今天启动SQL,发现服务启动失败.报错例如以下:--错误发生 1069-(因为登录失败而无法启动服务.) .百度一下,解决方式例如以下: 请按下列步骤操作: 1.右键单 ...

  5. Leetcode: Merge/Insert Interval

    题目 Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[ ...

  6. nginx 服务器重启命令，关闭（转）

    nginx -s reload  :修改配置后重新加载生效 nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试nginx配置文件是 ...

  7. spring @Transactional注解参数详解（转载）

    事物注解方式: @Transactional 当标于类前时, 标示类中所有方法都进行事物处理 , 例子: 1 @Transactional public class TestServiceBean i ...

  8. maven profile多环境动态配置文件使用

    pom.xml <profiles> <!-- =====开发环境====== --> <profile> <id>dev</id> < ...

  9. nexus配置第三方库文件

    进入nexus管理界面 默认用户名密码:admin/admin123 在左侧Views/Repositories中选择Repositories,然后在右侧的面板中选择3rd party,在下方arti ...

  10. java基础之Flex弹性布局、JSP错误处理以及Log4J

    一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...