一、bootstrap-fontawesome-iconpicker组件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Font Awesome Icon Picker plugin for Bootstrap</title>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!--https://www.bootcdn.cn/font-awesome/        字体图标库-->

<link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.css" rel="stylesheet">

<!--https://www.bootcdn.cn/fontawesome-iconpicker/        fontawesome-iconpicker组件样式-->

<link href="https://cdn.bootcss.com/fontawesome-iconpicker/3.2.0/css/fontawesome-iconpicker.css" rel="stylesheet">

</head>

<body>

<div class="input-group">

    <span class="input-group-addon"></span>

    <input data-placement="bottomLeft" class="form-control icp icp-auto" value="fa-archive" type="text"/>

</div>

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--https://www.bootcdn.cn/fontawesome-iconpicker/        fontawesome-iconpicker组件css-->

<script src="https://cdn.bootcss.com/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.js"></script>

<script>

    $(function() {

        $('.icp-auto').iconpicker();

    });

    </script>

</body>

</html>

一、bootstrap-fontawesome-iconpicker组件的更多相关文章

  1. 利用bootstrap的modal组件自定义alert，confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  2. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  3. bootstrap 之 列表组件使用

    列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...

  4. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  5. bootstrap+font-awesome表单

    bootstrap+font-awesome表单 <form action="" class="form-horizontal col-sm-offset-4&qu ...

  6. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  7. Bootstrap Blazor Table 组件（二）

    原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...

  8. bootStrap树形目录组件

    需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用.车型一共有4级目录.要使用目录树.然后分活动和商品两种,需要能够通过不通参数来调用该组件.车型品牌要使用 ...

  9. Bootstrap基本类和组件学习二

    一.联系方式:(自带鼠标的移动动画) 1.头文件CSS <link rel="shortcut icon" href="favicon.ico"> ...

  10. 详解Bootstrap列表组组件

    列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...

随机推荐

  1. css3系列--概述

    CSS3分成了不同类别,称为“modules”.而每一个“modules”都有于CSS2中额外增加的功能,以及向后兼容.CSS3早于1999年已经开始制订.[18]直到2011年6月7日,CSS 3 ...

  2. 对于一般情况X1+X2+X3+……+Xn=m 的正整数解有 (m-1)C(n-1) 它的非负整数解有 (m+n-1)C(n-1)种

    对于一般情况X1+X2+X3+……+Xn=m 的正整数解有 (m-1)C(n-1) 它的非负整数解有 (m+n-1)C(n-1)种

  3. IText PDF简单示例

    package com.exe.learn.demo.itextpdf; import java.io.ByteArrayInputStream; import java.io.File; impor ...

  4. Mysq修改引擎

    [数据库]Mysql更改默认引擎为Innodb的步骤方法   前言 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定. 基本的差别为:MyI ...

  5. vue2.0 使用 vue-aplayer

    1.安装 npm i vue-aplayer 2.引入 import VueAplayer from 'vue-aplayer' name: "Aplayer", props: [ ...

  6. 原理图和PCB元件对应查找--Altium Designer

    画PCB的时候,需要经常的去查看原理图上对应的元件,元件数目少还好找,数目多了找起来就比较扯淡.还好Altium Designer提供了不错的交叉查找功能. 建议使用两个显示器,一个显示器放原理图,另 ...

  7. UIStakView的添加与移除

    subView和arrangedSubView对于Stack View的子控件添加和移除,我们是这样描述的. 添加-->(Stack View管理的subview) addArrangedSub ...

  8. winform防止输入法对扫码的干扰

    把textbox的imemode的属性设为disable,就强制只能录入英文和半角符号,防止了中文输入法等的干扰. 参考:https://blog.csdn.net/jhycjhyc/article/ ...

  9. 15. Jmeter-配置元件二

    jmeter-配置元件介绍与使用 JDBC Connection Configuration Java请求默认值 密钥库配置 LDAP Extended Request Defaults LDAP请求 ...

  10. springboot 尚桂谷学习笔记03

    ------spring boot 与日志------ 日志框架: 市面上的日志框架: jul jcl jboss-logging logback log4j log4j2 ...... 左边一个门面 ...