按钮上加入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. HDOJ 2561. 第二小整数 第k大问题

    第二小整数 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  2. asp.net缓存

    copy:http://www.cnblogs.com/knowledgesea/archive/2012/06/20/2536603.html 一.缓存概念,缓存的好处.类型.            ...

  3. Nginx模块之http.md

    ngx_http_access_module ngx_http_access_module模块允许限制对某些客户端地址的访问. 访问也可以通过密码,子请求的结果或JWT来限制. 通过地址和密码的同时访 ...

  4. 安装CentOS7文字界面版后,无法联网,用yum安装软件提示 cannot find a valid baseurl for repo:base/7/x86_64 的解决方法

    *无法联网的明显表现会有: 1.yum install出现 Error: cannot find a valid baseurl or repo:base 2.ping host会提示unknown ...

  5. 数组为什么可以使用linq查询

    问题引出 这视乎是个完全不必要进行讨论的话题,因为linq(这里具体是linq to objects)本来就是针对集合类型的,数组类型作为集合类型的一种当然可以使用了.不过我还是想写一下,这个问题源于 ...

  6. Caliburn.Micro学习笔记目录

    Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 Caliburn.Micro学习笔记(二)----Actions Caliburn.Micro学习笔记(三)----事件聚合IE ...

  7. SqlServer按中文数字排序

    表数据: 按名称排序 并不能得到一二三四五六的顺序 select * from LiWei order by name 找到中文数字在'一二三四五六七八九十'的位置 select id,name,SU ...

  8. 基于modelsim-SE的专业进阶仿真流程

    基于modelsim-SE的专业进阶仿真流程 通过<基于modelsim-SE的简单仿真流程>和<调用altera IP核的仿真流程>是否感受到仿真流程中的繁琐步骤,特别是在m ...

  9. js获取可视区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  10. 在页面的el表达式是如何判断null的

    <c:if test="${not empty message}"> <div id="message" class="alert ...