CSS3使用Font Awesome字体图标的控件样例（按钮，工具栏，输入框）例子

下面是几个带图标的常用组件样例（带图标的按钮，toolBar，还有带图标的帐户密码输入框组件），其中图标使用的是 Font Awesome 字体图标。Font Awesome字体图标的用法可以查看我前面写的文章：CSS3 - 在html页面中使用Font Awesome字体图标

<!doctype html>
<html lang="en">
    <head>
    <title>hangge.com</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <style>
        * {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
 
        *:before,
        *:after {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
 
        body {
          font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-size: 14px;
          line-height: 1.42857143;
          color: #333333;
          background-color: #ffffff;
        }
 
        button,
        input,
        optgroup,
        select,
        textarea {
          color: inherit;
          font: inherit;
          margin: 0;
        }
 
        a {
          color: #21b384;
          text-decoration: none;
        }
        a:hover,
        a:focus {
          color: #198764;
          text-decoration: underline;
        }
        a:focus {
          outline: thin dotted;
          outline: 5px auto -webkit-focus-ring-color;
          outline-offset: -2px;
        }
 
        .btn {
          display: inline-block;
          margin-bottom: 0;
          font-weight: normal;
          text-align: center;
          vertical-align: middle;
          touch-action: manipulation;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          white-space: nowrap;
          padding: 6px 12px;
          font-size: 14px;
          line-height: 1.42857143;
          border-radius: 4px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        .btn:focus,
        .btn:active:focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn.active.focus {
          outline: thin dotted;
          outline: 5px auto -webkit-focus-ring-color;
          outline-offset: -2px;
        }
        .btn:hover,
        .btn:focus,
        .btn.focus {
          color: #333333;
          text-decoration: none;
        }
        .btn:active,
        .btn.active {
          outline: 0;
          background-image: none;
          -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }
 
        /***** 1 *****/
 
        .btn-danger {
          color: #ffffff;
          background-color: #d9534f;
          border-color: #d43f3a;
        }
 
        .btn-danger:focus,
        .btn-danger.focus {
          color: #ffffff;
          background-color: #c9302c;
          border-color: #761c19;
        }
        .btn-danger:hover {
          color: #ffffff;
          background-color: #c9302c;
          border-color: #ac2925;
        }
 
 
        /***** 2 *****/
        .btn-default {
          color: #333333;
          background-color: #ffffff;
          border-color: #cccccc;
        }
        .btn-default:focus,
        .btn-default.focus {
          color: #333333;
          background-color: #e6e6e6;
          border-color: #8c8c8c;
        }
        .btn-default:hover {
          color: #333333;
          background-color: #e6e6e6;
          border-color: #adadad;
        }
        .btn-default:active{
          color: #333333;
          background-color: #e6e6e6;
          border-color: #adadad;
        }
 
        .btn-sm {
          padding: 5px 10px;
          font-size: 12px;
          line-height: 1.5;
          border-radius: 3px;
        }
 
        /***** 3 *****/
        .btn-lg {
          padding: 10px 16px;
          font-size: 18px;
          line-height: 1.3333333;
          border-radius: 6px;
        }
 
        .btn-success {
          color: #ffffff;
          background-color: #1d9d74;
          border-color: #198764;
        }
        .btn-success:focus,
        .btn-success.focus {
          color: #ffffff;
          background-color: #157254;
          border-color: #051c15;
        }
        .btn-success:hover {
          color: #ffffff;
          background-color: #157254;
          border-color: #0f543e;
        }
        .btn-success:active {
          color: #ffffff;
          background-color: #157254;
          border-color: #0f543e;
        }
 
        /***** 4 *****/
        .btn-group,
        .btn-group-vertical {
          position: relative;
          display: inline-block;
          vertical-align: middle;
        }
        .btn-group > .btn,
        .btn-group-vertical > .btn {
          position: relative;
          float: left;
        }
        .btn-group > .btn {
          position: relative;
          float: left;
        }
 
        .btn-group .btn + .btn,
        .btn-group .btn + .btn-group,
        .btn-group .btn-group + .btn,
        .btn-group .btn-group + .btn-group {
          margin-left: -1px;
        }
 
        .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
          border-radius: 0;
        }
        .btn-group > .btn:first-child {
          margin-left: 0;
        }
        .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }
        .btn-group > .btn:last-child:not(:first-child),
        .btn-group > .dropdown-toggle:not(:first-child) {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }
 
        /***** 5 *****/
        .margin-bottom-sm {
          margin-bottom: 5px !important;
        }
 
        .input-group {
          position: relative;
          display: table;
          border-collapse: separate;
        }
        .input-group[class*="col-"] {
          float: none;
          padding-left: 0;
          padding-right: 0;
        }
        .input-group .form-control {
          position: relative;
          z-index: 2;
          float: left;
          width: 100%;
          margin-bottom: 0;
        }
 
        .input-group-addon,
        .input-group-btn,
        .input-group .form-control {
          display: table-cell;
        }
        .input-group-addon:not(:first-child):not(:last-child),
        .input-group-btn:not(:first-child):not(:last-child),
        .input-group .form-control:not(:first-child):not(:last-child) {
          border-radius: 0;
        }
        .input-group-addon,
        .input-group-btn {
          width: 1%;
          white-space: nowrap;
          vertical-align: middle;
        }
        .input-group-addon {
          padding: 6px 12px;
          font-size: 14px;
          font-weight: normal;
          line-height: 1;
          color: #555555;
          text-align: center;
          background-color: #eeeeee;
          border: 1px solid #cccccc;
          border-radius: 4px;
        }
 
        .input-group .form-control:first-child,
        .input-group-addon:first-child,
        .input-group-btn:first-child > .btn,
        .input-group-btn:first-child > .btn-group > .btn,
        .input-group-btn:first-child > .dropdown-toggle,
        .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
        .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }
 
        .input-group-addon:first-child {
          border-right: 0;
        }
        .input-group .form-control:last-child,
        .input-group-addon:last-child,
        .input-group-btn:last-child > .btn,
        .input-group-btn:last-child > .btn-group > .btn,
        .input-group-btn:last-child > .dropdown-toggle,
        .input-group-btn:first-child > .btn:not(:first-child),
        .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }
        .input-group-addon:last-child {
          border-left: 0;
        }
 
        .form-control {
          display: block;
          width: 100%;
          height: 34px;
          padding: 6px 12px;
          font-size: 14px;
          line-height: 1.42857143;
          color: #555555;
          background-color: #ffffff;
          background-image: none;
          border: 1px solid #cccccc;
          border-radius: 4px;
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        .form-control:focus {
          border-color: #66afe9;
          outline: 0;
          -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
        }
        .form-control::-moz-placeholder {
          color: #999999;
          opacity: 1;
        }
        .form-control:-ms-input-placeholder {
          color: #999999;
        }
        .form-control::-webkit-input-placeholder {
          color: #999999;
        }
        .form-control::-ms-expand {
          border: 0;
          background-color: transparent;
        }
    </style>
</head>
<body>
<div style="width:200px">
    <a class="btn btn-danger" href="#">
      <i class="fa fa-trash-o fa-lg"></i> Delete</a>
    <a class="btn btn-default btn-sm" href="#">
      <i class="fa fa-cog"></i> Settings</a>
    <br><br>
 
    <a class="btn btn-lg btn-success" href="#">
      <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.5.0</a>
    <br><br>
 
    <div class="btn-group">
      <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
      <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
      <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
      <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
    </div>
    <br><br>
 
    <div class="input-group margin-bottom-sm">
      <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
      <input class="form-control" type="text" placeholder="Email address">
    </div>
 
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
      <input class="form-control" type="password" placeholder="Password">
    </div>
<div>
</body>
</html>

时间： 2024-09-11 19:30:04

CSS3使用Font Awesome字体图标的控件样例（按钮，工具栏，输入框）例子的相关文章

苹果开发之Swift字体图标的使用及样例（使用Font Awesome字体库，非图片）

一,什么是字体图标 (1)现在比较流行使用字体图标,所谓字体图标其实就是一个包含许多图标的字体库.同我们常用的字体一样,这个也可以理解为一种特殊字体,只不过里面包含的都是图标. (2)既然是字体,那么最方便的就是可以随意在代码中更改颜色和大小而不会失真.这样不需要因为要适配各种尺寸而制作多个图片,或者做多套颜色的图标用来标识不同状态. (3)无论是按钮图标还是导航栏图标,也不管是网站开发还是移动应用开发,字体图标都能适用. (比如下面几个就可以使用字体图标实现,像 hangge.com 右侧导航

CSS3下拉菜单控件的样例（使用Font Awesome字体图标）例子

下面时一个带图标的下拉列表框样例,点击右侧的向下箭头可以打开或者收缩菜单.其中图标使用的是 Font Awesome 字体图标.Font Awesome字体图标的用法可以查看我前面写的文章:CSS3 - 在html页面中使用Font Awesome字体图标 <!doctype html> <html lang="en">     <head>     <title>hangge.com</title>     <link

CSS3在html页面中使用Font Awesome字体图标的方法

一,什么是字体图标 (1)现在比较流行使用字体图标,所谓字体图标其实就是一个包含许多图标的字体库.同我们常用的字体一样,这个也可以理解为一种特殊字体,只不过里面包含的都是图标. (2)既然是字体,那么最方便的就是可以随意在代码中更改颜色和大小而不会失真.这样不需要因为要适配各种尺寸而制作多个图片,或者做多套颜色的图标用来标识不同状态. (3)无论是按钮图标还是导航栏图标,也不管是网站开发还是移动应用开发,字体图标都能适用. (比如下面几个就可以使用字体图标实现,像 111cn.net 右侧导航栏

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

今天给大家带来一个很实用的小控件ClearEditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,IOS上面直接设置某个属性就可以实现这一功能,但是Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText,接下来就带大家来实现这一小小的功能 我们知道,我们可以为我们的输入框在上下左右设置图片,所以我们可以利用属性android:drawableRight设置我们的删除小图标,如图 我这里设置了左边和右边的图

asp.net-datalist 控件的更新按钮是怎么么弄的，PAGEADMIN

问题描述 datalist 控件的更新按钮是怎么么弄的,PAGEADMIN http://bbs.csdn.net/topics/390984339 谢了

控件随窗体等比例缩放，怎么改变combo控件下拉按钮的大小？

问题描述 控件随窗体等比例缩放,怎么改变combo控件下拉按钮的大小? 控件随窗体等比例缩放,怎么改变combo控件下拉按钮的大小?为什么它的大小不会自动缩放?

imageview-Android 有没有开源控件用一个按钮缩放和旋转的ImageView

问题描述 Android 有没有开源控件用一个按钮缩放和旋转的ImageView 很多图片软件 有添加图层的功能,右上角有一个编辑按钮可以缩放,旋转.请问这个有没有开源控件? 解决方案 图片的缩放和旋转,均可使用Matrix(android.graphics.Matrix)配合Bitmap来实现.具体可以上网查查,希望对你有帮助. 解决方案二: 有,你百度搜一下Android最火的25个开源框架

net-gridview控件内部删除按钮

问题描述 gridview控件内部删除按钮 1C 通过设置gridview的datakeynames=id,但发现设置完之后 再执行出现下面的错误请问这个错误该怎么解决?如果不设置gridview的datakeynames,那又该怎么进行gridview内部删除按钮的编写呢?求解 解决方案 说的很清楚,没有id这个属性,你的表里面怎么写的.有没有id 解决方案二: 你的表必须要有主键,没有主键的表不能删除和修改.很简单的道理,没有一个能区分唯一记录的字段,怎么知道应该删哪一行? 解决方案三: 给

jQuery中的fullCalendar控件，给按钮添加监听事件。

问题描述 jQuery中的fullCalendar控件,给按钮添加监听事件. 5C $('#calendar').fullCalendar({ height : 177 header:{ left: 'title' center: '' right: 'prevnext' } theme: false buttonText: { today: '今天' } selectable:true allDayText: '全天' monthNames: ['一月''二月''三月''四月''五月''六月'