按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过css样式模拟出button的外形,给a标签添加click的属性,从而实现点击效果。

功能:   添加css样式,模仿bootstrap的风格,实现按钮加图标的效果

1、用 a标签加入图标的方式

参考链接:

http://www.111cn.net/cssdiv/css/105344.htm

<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg">
</i> Delete</a>

可以用button标签加入图标

 <button type="submit" class="btn btn-success">
<i class="fa fa-check" />
</i>确定
</button>

CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)的更多相关文章

  1. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  2. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  3. Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

    转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Andr ...

  4. 怎么在XY图表中添加注解(LightningChart控件为例)?

    场景: 折线图上有多个信号,每个信号都需要显示在自己的Y轴上.如何在屏幕的右侧显示每个信号的基本统计值?这里有为每个信号计算基本数据: 最小值,最大值,平均值. | |Signal 3........ ...

  5. (转载) Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

    Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框 标签: Android清除功能EditText仿IOS的输入框 2013-09-04 17:33 70865人阅读  ...

  6. MFC控件编程之 按钮编辑框.静态文本的使用,以及访问控件的七种方法.

    MFC控件编程之 按钮编辑框.静态文本的使用以及访问控件的七种方法. 一丶按钮.静态文本的通用属性. 他们都有一个属性.就是可以输入标题内容.以及可以自定义控件ID. 创建一个MFC Dlg对话框. ...

  7. FileUpload控件实现单按钮图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

  8. (22)bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

  9. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

随机推荐

  1. POJ2104 K-th Number [分块做法]

    传送:主席树做法http://www.cnblogs.com/candy99/p/6160704.html 做那倒带修改的主席树时就发现分块可以做,然后就试了试 思想和教主的魔法差不多,只不过那个是求 ...

  2. nodejs核心模块之http

    http模块包含以下5个核心类和方法及属性: 核心类 1,http.Agent 2,http.ClientRequest 3,http.Server 4,http.ServerResponse 5,h ...

  3. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  4. [NOI2006] 最大获利

    [NOI2006] 最大获利 ★★★☆   输入文件:profit.in   输出文件:profit.out   简单对比时间限制:2 s   内存限制:512 MB [问题描述] 新的技术正冲击着手 ...

  5. [LeetCode] Guess Number Higher or Lower 猜数字大小

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  6. c#枚举使用详解

    简介 1. 枚举(enum type)通常用来表示一组常量.由于枚举是强类型的,这在编程中给我们提供了极大的方便. 2. 枚举的定义: public enum Sex { 男 = 0, 女 = 1 } ...

  7. Chrome浏览器调试,console简述

    作为一个前端开发者,不可避免的需要进行各种各样的调试. 在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程 ...

  8. 递推 hdu 2064

    z[n] n个盘子从1到3次数 先想2个的时候  1->2 2->3  1->2 3->2 2->1 2->3 1->2 2->3 显然 要先把上面n- ...

  9. spring MVC入门教程

    写一个spring mvc后台传值到前台的一个小例子. 分为以下几个步骤: 1.创建web项目. 导入项目包.具体有如下: spring-aop-4.0.4.RELEASE.jar spring-be ...

  10. Leetcode 16. 3Sum Closest

    Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...