一、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. swagger集成到springBoot 项目中

    1 pom 文件加包依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>spring ...

  2. 对OpenStack运维架构的总结（转）

    这里,仅从技术角度出发,谈谈OpenStack云平台在部署.架构和运维实施等方面的感想. 缘起,在2014年大二首次接触到OpenStack,当时国内外资料远没有当前这么丰富,为安装一个OpenSta ...

  3. Linux的cat命令详解

    The cat command reads one or more files and copies them to standard output 也就是说,cat命令读取文件,并显示在 stand ...

  4. TortoiseGit操作之提交代码到远程库

    1.在本地代码库的文件夹中,"右键" 2.GIT提交要求必须填写Commit message,请认真填写描述信息. 建议填写的变更项编号,如上图. 代码提交到本地的配置库中,然后p ...

  5. Java Web学习总结（6）Cookie/Session

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 二.会话过程中要解决的一些问题 每个用户在使用浏览器与服务器进行 ...

  6. SpringMVC的 ModelAndView

    使用ModelAndView类用来存储处理完后的结果数据,以及显示该数据的视图. public class ModelAndView { /** View instance or view name ...

  7. [CSP-S模拟测试]:english（可持久化Trie+启发式合并）

    题目传送门(内部题24) 输入格式 第一行有$3$个整数$n,opt$,$opt$的意义将在输出格式中提到.第二行有$n$个整数,第$i$个整数表示$a_i$. 输出格式 若$opt=1$,输出一行一 ...

  8. 微博API的申请

    https://segmentfault.com/a/1190000012548487

  9. IntelliJ IDEA更新maven依赖包

    问题: IntelliJ IDEA自动载入Maven依赖的功能很好用,但有时候会碰到问题,导致pom文件修改却没有触发自动重新载入的动作,此时需要手动强制更新依赖. 方法: 方法一: ①.右键单击项目 ...

  10. appium desktop 定位弹出框时报错

    今天在定位真机APP的时候,弹出框的内容死活定位不到,只能定位到背景的内容. 问题:appium desktop 定位弹出框时报错,定位不到,只能定位到背景的内容. 分析: 定位工具找不到弹出框的元素 ...