一、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. linux ---apache的安装和配置

    linux环境下的安装:yum安装和tar包安装 yum安装: 首先安装php环境 yum install php55w yum install php55w-mysql yum install ph ...

  2. hdu1231 最长连续子序列和

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1231 给定K个整数的序列{ N1, N2, ..., NK },其任意连续子序列可表示为{ Ni, N ...

  3. 【串线篇】Mybatis拓展之MBG

    MBG-逆向工程 一.介绍 MBG:MyBatis Generator:代码生成器: MyBatis官方提供的代码生成器:帮我们逆向生成: 正向: table----javaBean---BookDa ...

  4. 什么是ppa

    What is ppa? PPAs are for non standard software/updates. They are generally used by people who want ...

  5. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  6. 【leetcode】1018. Binary Prefix Divisible By 5

    题目如下: Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted a ...

  7. java获取当月日期 和 周末

    /** * java获取 当月所有的日期集合 * @return */public static List<Date> getDayListOfMonth() { List list = ...

  8. php strncasecmp()函数 语法

    php strncasecmp()函数 语法 作用:比较字符串前n个字符,不区分大小写直线电机 语法:strncasecmp(string1,string2,length) 参数: 参数 描述 str ...

  9. FS，FT，DFS，DTFT，DFT，FFT的联系和区别 数字信号处理

    DCT变换的原理及算法 文库介绍 对于初学数字信号处理(DSP)的人来说,这几种变换是最为头疼的,它们是数字信号处理的理论基础,贯穿整个信号的处理. 学习过<高等数学>和<信号与系统 ...

  10. nodejs环境安装

    centos7安装nodejs环境 原文地址: https://www.cnblogs.com/MY0101/p/6625344.html 下载地址: https://nodejs.org/dist/ ...