一、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. Nginx的简单使用

    一.Nginx概述 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.它的特点是支持高并发:资源消耗少:可以做HTTP反向代 ...

  2. SpringBoot---概述

    1.概述 1.1.SpringBoot解决什么问题? 1.1.1.配置---> 自动化配置 1.1.2.依赖---> SpringBoot提供了一系列的Start POM,整合各项功能的时 ...

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

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

  4. linux的块设备层

    ll_rw_block()是块设备驱动层,向上提供按block读写块设备到某个内存地址的(是以page为目标单位)方法． bread()是块设备缓冲层,磁盘上的block用页缓存．先从这个缓存里找,找 ...

  5. [NOIP模拟20]题解

    来自达哥的问候…… A.周 究级难题,完全不可做QAQ #include<cstdio> #include<iostream> #include<cstring> ...

  6. Docker容器数据卷-Volume详解

    Docker中的数据可以存储在类似于虚拟机磁盘的介质中,在Docker中称为数据卷(Data Volume).数据卷可以用来存储Docker应用的数据,也可以用来在Docker容器间进行数据共享.数据 ...

  7. linux从head.s到start_kernelstart_kernel之---内核重定位后分析

    参考: https://biscuitos.github.io/blog/ARM-BOOT/ zImage 重定位之后实践 zImage 重定位之后,ARM 将 pc 指针指向了重定位 zImage ...

  8. 命令连接redis

    cd到redis的bin目录 ./redis-cli -h 输入info,看是否要验证 清空所有key FLUSHALL

  9. vue搭建项目之设置axios

    首先要下载axios: npm install axios -S 要注意的是,axios不支持Vue.use();这种方式,可以改写原型链. 第二步就是新建axios存放位置: 在项目中src中单独建 ...

  10. <转>Excel生成guid、uuid

    Excel生成guid.uuid  原文地址:https://www.cnblogs.com/jory/p/7718305.html  1.Excel生成guid,uuid  格式:600d65bc- ...