font awesome 页面小图标

前段时间做页面，从网上查找资料，发现了一个好用的工具，就是font awesome奥森图标，使用了一下，发现非常方便，而且很灵活，纯css编写，可以和bootstrap结合使用，网页用上之后，瞬间高大上了，遂推荐一下。

下载地址为：http://download.csdn.net/detail/reinhard_yang/9810959

使用方法很简单，页面引入css文件即可

<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />

表单元素添加样式即可

<span><i class="fa fa-comment"></i> 哈</span>

样式如图

样式大全：http://www.thinkcmf.com/font/icons#new

应有尽有，基本上可以满足日常所需了，是不是很方便，真可谓居家旅行必备良品。

font awesome 页面小图标的更多相关文章

  1. 添加阿里巴巴图标，让你页面小图标都是CSS3写成

    第一步把你想要的小图标添加到购物车里,然后如图下载 第二步下载完了,如下图有这些文件 第三步,把你需要的必要文件放到文件夹中,然后把需要的代码放到一个CSS中,然后引用 备注,这几个文件就是字体,必须 ...

  2. Web前端开发最佳实践（7）：使用合理的技术方案来构建小图标

    大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...

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

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

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

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

  5. Font Awesome-用CSS实现各种小图标icon

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.官网:http://fontawesome.dashga ...

  6. Vue.js 使用 Font Awesome 小图标

    1.安装 Font Awesome npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-soli ...

  7. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  8. 用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  9. 请用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

随机推荐

  1. 关于matplotlib绘制直方图偏移的问题

    在使用pyplot绘制直方图的时候我发现了一个问题,在给函数.hist()传参的时候,如果传入的组数不是刚刚好(就是说这个组数如果是使用(最大值-最小值)/组距计算出来,而这个数字不是整除得来而是取整 ...

  2. Numpy 基础

    Numpy 基础 参考https://www.jianshu.com/p/83c8ef18a1e8 import numpy as np 简单创建数组 # 创建简单列表 a = [1, 2, 3, 4 ...

  3. Office DCOM 组件交互权限设置

    这里以 WORD 为例: 运行 mmc -32 打开控制台. 点击 文件 -> 添加/删除管理单元 ,在 可用的管理单元 中选择 组件服务 ,然后点击 添加 , 确定 . 展开 组件服务节 点直 ...

  4. BUTXO详解

    在比原链中,每个交易消耗之前交易生成的BUTXO 然后生成新的 BUTXO,账户的余额即所有属于该地址的未花费 BUTXO 集合,BTM 的全局状态即当前所有未花费的BUTXO 集合.我们用一个具体的 ...

  5. RFS常见问题

    一.DatabaseLibrary 库遇到的问题:1,连接mysql库,查询语句带有中文,报FAIL UnicodeEncodeError: 'latin-1' codec can't encode ...

  6. mongodb在ubuntu下无法打开的问题

    通过查询大概知道了是非正常关闭,mongod.lock的事,ubuntu的mongod.lock在/var/lib/mongodb中,删除之后即可重新打开.

  7. div变成输入框

    <style> #test{ width: 150px;; min-height:20px; max-height:70px; outline: 0; border: 1px solid ...

  8. Android人脸识别Demo竖屏YUV方向调整和图片保存

    本博客包含三个常用方法,用于盛开Android版人脸识别Demo中竖屏使用时送入yuv数据,但一直无法识别的情况. 1.首先可以尝试顺时针旋转90°或270°,然后送入识别SDK. 2.旋转方向后依然 ...

  9. 第 10 章 容器监控 - 078 - Docker 最常用的监控方案

    Docker 最常用的监控方案 当 Docker 部署规模逐步变大后,可视化监控容器环境的性能和健康状态将会变得越来越重要. Docker 自带的几个监控子命令: ps .top .stats 功能更 ...

  10. zoj2930

      各点向S连推迟的花费,向T连提前的花费,S表示提前,T表示推迟.a推迟b也推迟b往a连INF.最小割后从各点出发,能直接或间接到T的就是必须推迟的,剩下的就是能提前的. #include < ...