fontawesome-iconpicker实现图标选择器效果代码-html代码-BFW代码库

fontawesome-iconpicker实现图标选择器效果代码

代码语言：html

所属分类：选择器

代码描述：fontawesome-iconpicker实现图标选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fontawesome-iconpicker.min.css">
   
    <style>
        footer {
            font-style: italic;
            background: #f7f7f7;
            padding: 60px;
            text-align: center;
            margin-top: 60px;
        }

        pre {
            text-align: left;
        }

        .form-control, .form-group {
            position: relative;
        }

        p.lead {
            max-width: 800px;
            margin: 0 auto 20px auto;
        }

        div.lead {
            margin: 30px 0;
        }

        a.action-placement {
            margin: 0 4px 4px 4px;
            display: inline-block;
            /*border-bottom: 1px dotted #428BCA;*/
            text-decoration: none;
        }

        a.action-placement.active {
            color: #5CB85C;
        }

        .form-group {
            text-align: left;
            margin-bottom: 30px;
        }

        .form-group label {
            display: block;
            margin-bottom: 15px;
        }

        .lead iframe {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
<div class="container" style="text-align: center">
   
  
   
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="panel-title">Demos</h2>
        </div>
        <div class="panel-body">
            <p class="lead">
                <i class="fa fa-graduation-cap fa-3x picker-target"></i>
            </p>
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        <label>Default</label>
                        <input class="form-control icp icp-auto" value="fas fa-anchor" type="text"/>
                    </div>
                    <div class="form-group">
                        <label>As a component</label>

                        <div class="input-group">
                            <input data-placement="bottomRight" class="form-control icp icp-auto" value="fas fa-archive"
                                   type="text"/>
                            <span class="input-group-addon"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>With the input as a search box</label>
                        <input class="form-control icp icp-auto" data-input-search="true" value="fas fa-plane"
                               type="text"/>
                    </div>
                    <div class="form-group">
                        <label>Inside dropdowns</label>
                        <div class="btn-group">
                            <button data-selected="graduation-cap" type="button"
                                    class="icp icp-dd btn btn-default dropdown-toggle iconpicker-component"
                                    data-toggle="dropdown">
                                Dropdown <i class="fa fa-fw"></i>
      .........完整代码请登录后点击上方下载按钮下载查看