fontawesome-iconpicker实现图标选择器效果代码
代码语言：html
所属分类：选择器
代码描述：fontawesome-iconpicker实现图标选择器效果代码
代码标签： 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>
<span class="caret"></span>
</button>
<div class="dropdown-menu"></div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary iconpicker-component"><i
class="fa fa-fw fa-heart"></i></button>
<button type="button" class="icp icp-dd btn btn-primary dropdown-toggle"
data-selected="fa-car" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu"></div>
</div>
<p class="help-block"><br>
Note: In dropdowns the placement is controlled by the Bootstrap dropdown plugin
</p>
</div>
<div class="form-group">
<label data-title="Inline picker" data-placement="inline" class="icp icp-auto"
data-selected="fa-align-justify">
Inline mode, without input:
</label>
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<label>With custom options, e.g. a subset of icons</label>
<input class=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0