一、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. shlwapi.h文件夹文件是否存在

    { if( NULL == lpszFileName) { return FALSE; } if (PathFileExists(lpszFileName)) { return TRUE; } els ...

  2. 设备树中#address-cells和#size-cells作用

    device tree source Example1 / { #address-cells = <0x1>; // 在 root node 下使用 1 個 u32 來代表 address ...

  3. CentOS下安装gdb的方法

    https://blog.csdn.net/zlk252620068/article/details/79564944

  4. vscode舒适的字体风格

    首选项-->设置-->输入setting.json-->查找到设置文件 添加如下配置 "editor.tabSize": 2, "files.assoc ...

  5. Java遍历集合的几种方法

    遍历集合的几种方法 用不同的方法遍历集合. public interface Iterator:对Collection进行迭代的迭代器.迭代器取代了Java Collections FrameWork ...

  6. 26.LockSupport线程阻塞工具

    import java.util.concurrent.locks.LockSupport; /** * 线程阻塞工具类:LockSupport * 可以在线程内任意位置让线程阻塞 */ public ...

  7. toj 4061 矩阵攻击(最大独立集)

    题目: 给定一个01 矩阵,其中你可以在0的位置放置攻击装置.每一个攻击装置 (x,y) 都可以按照“日”字攻击其周围八个位置(x−1,y−2),(x−2,y−1),(x+1,y−2),(x+2,y− ...

  8. 【leetcode】1020. Partition Array Into Three Parts With Equal Sum

    题目如下: Given an array A of integers, return true if and only if we can partition the array into three ...

  9. 解决如何通过循环来使用数据库的值设置jsp的select标签的option值

    Select 处的代码: <select name="position"> <span style="white-space:pre"> ...

  10. 输入流之顶层抽象InputStream

    该类是所有二进制输入流的的抽象父类 类中主要方法解释说明如下 (1)public abstract int read() throws IOException; 该方法是从输入流中读取下一个字节,返回 ...