Angular2上应用基于jQuery的Bootstrap 3 - iconpicker

最新推荐文章于 2024-08-27 09:17:11 发布

pillow_L

最新推荐文章于 2024-08-27 09:17:11 发布

阅读量778

点赞数 1

分类专栏： angularjs2 图标文章标签： angular2 bootstrap iconpicker

本文链接：https://blog.csdn.net/baidu_28660921/article/details/76133091

版权

本文介绍了如何在Angular2应用中使用基于jQuery的Bootstrap 3 Iconpicker插件，详细步骤包括下载依赖、配置文件、在组件中使用以及设置图标集。

摘要由CSDN通过智能技术生成

Iconpicker是一个用于Bootstrap 3 的jQuery图标选择器插件，允许您在工具提示类似的弹出界面中从多个图标集中选择并选择一个图标。

参考：
http://www.jqueryscript.net/other/jQuery-Based-Icon-Picker-For-Bootstrap-3-iconpicker.html
https://victor-valencia.github.io/bootstrap-iconpicker/#

1.下载bootstrap-iconpicker和bootstrap，jQuery没有的话也得下载

cnpm install bootstrap-iconpicker -S
cnpm install bootstrap --save

(-S和–save 等效)

2.加入相关js和css
在.angular-cli.json中加入js和css

"styles": [
        "styles.css"
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"
      ],
      "scripts": [
        "../node_m

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

pillow_L

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

分享 82个实用的前端开发工具

liuhao9999的博客

02-28

587

01、Day.js 地址：https://day.js.org/en/ Day.js 是一个极简的 Javascript 库，大小只有大约 2Kb。它可以在浏览器和 NodeJs（服务器端）上工作。它和moment js非常相似，所以切换到这个库时你可以放心。此外，它还可以在当今最流行的浏览器上运行，例如 Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的 Firefox，以及新的 Safar...

前端网站资源精编！！

qianduan666a的博客

07-16

9308

前端网站资源精编！！目录: 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- Angularjs 5-------- ES6 6-------- React 7-------- 移动端API 8-------- avalon 9-------- Requriejs 10-------- vue 11-------- Seajs 12-------- Less,sass 13-------- Markdown 14-------- D3

参与评论您还未登录，请先登录后发表或查看评论

前端项目-bootstrap-iconpicker.zip

09-03

前端项目-bootstrap-iconpicker,用于引导3.x的简单IConPicker

一、bootstrap-fontawesome-iconpicker组件

weixin_30378623的博客

06-01

315

一、bootstrap-fontawesome-iconpicker组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Font Awesome Icon Picker plugin for Bootstrap</titl...

Vue3 Icon Picker 使用教程

最新发布

gitblog_00841的博客

08-27

754

Vue3 Icon Picker 使用教程项目地址:https://gitcode.com/gh_mirrors/vu/vue3-icon-picker 项目介绍 Vue3 Icon Picker 是一个为 Vue3 项目设计的图标选择器组件。它集成了多个图标库，包括 fluentui-system-icons、ionicons、ant-design-icons、material-design-...

iconpicker:Bootstrap 5图标的Iconpicker

05-09

Bootstrap 5的Iconpicker 用法 1-通过CDN < script src = "https://unpkg.com/codethereal-iconpicker@1.1.3/dist/iconpicker.js" > < / script > 2-通过npm npm i codethereal-iconpicker import Iconpicker from 'codethereal-iconpicker' 3-或直接下载git repo并在dist目录下获取文件并将其导入 < script src = "/path/to/iconpicker.js" > < / script > new Iconpicker ( document . querySelector ( ".iconpicker" ) ) ; new Iconpicker ( document

Bootstrap Iconpicker: 快速、易用的图标选择器库

gitblog_00034的博客

04-27

373

Bootstrap Iconpicker: 快速、易用的图标选择器库去发现同类优质开源项目:https://gitcode.com/ Bootstrap Iconpicker 是一个基于流行的前端框架 Bootstrap 构建的插件，它为开发者提供了一个简单而强大的方式来集成和管理图标库。该项目链接如下：项目简介 Bootstrap Iconpicker 是 Victor Valencia 开...

JS组件系列之Bootstrap Icon图标选择组件

10-22

给大家介绍js组件系列之Bootstrap Icon图标选择组件，对bootstrap icon图标相关知识感兴趣的朋友一起学习吧

在angular里面使用jQuery和bootstrap

涂涂

08-13

5727

第一步： 1.在你的项目目录下面：npm install jquery --save --save是将jQuery加入package.json里面 2.在项目目录下面npm install bootstrap --save 安装完成后： "bootstrap": "^3.3.7", "core-js": "^2.4.1", "jquery": "^3.2.1", 第二步

【angular2】引入jquery及Bootstrap第三方库

蓝亭书序

12-24

5305

我们在使用angular2的时候难免不会遇到引入其他库的情况，比如一些UI库之类的。下面记录下如何引入jquery和bootstrap。 1、使用angular-cli工具先初始化一个项目框架(至于怎么搭建angular2的环境，请参看官方文档)，比如我的项目名为： demo。这里有个坑需要提一下：我们使用angular-cli初始化项目前需要安装好git工具（这里下载），并且将g

前端组件库大合集

04-26

1002

0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案前端模块管理器 Bower – ...

bootstrap4.0图标使用_很不错的两款Bootstrap Icon图标选择组件

weixin_39546092的博客

12-21

1249

一、Bootstrap icon picker组件这个组件是在github上面搜索的时候找到的，初初看上去，确实是很不错的，并且是基于bootstrap风格的，所以更加适合使用bootstrap风格布局的项目。既然是github上面的，毋庸置疑，这是一个开源组件，源码地址。好了，说了这么多，一起来看看它到底长啥样子吧。1、组件效果预览第一次初始化支持“上一页”和“下一页”支持自定义图标的选择支持模...

ngx-icon-picker:Angular 9+的Icon Picker DirectiveComponent，用于管理Font Awesome，Bootstrap Glyphicon，Font Awesome5和Material

05-14

角度图标选择器很大程度上受到启发 Angular IconPicker指令/组件，无需依赖。这是Angular 11+的图标选择器指令/组件。图标选择器管理“真棒字体”，“引导Glyphicon”，“真棒字体5（5.13.0）”和“材质”图标。安装和使用 npm安装ngx-icon-picker-保存为您的应用加载模块 import { IconPickerModule } from 'ngx-icon-picker' ; @ NgModule ( { ... imports : [ ... IconPickerModule ] } ) 在HTML模板中使用它 < input [iconPicker] =" icon " (iconPickerSelect) =" onIconPickerSelect(newIcon) "/> 可用的输入和

Bootstrap-Iconpicker 和pjax插件一起使用图标加载问题

xgs736214763的博客

12-08

1080

个人博客地址https://xgs888.top/post/view?id=72 项目中整站用到pjax，由于需要菜单栏显示小图标就用了Bootstrap-Iconpicker插件，只需要直接引用就行图标但是在编辑页面初始化加载的图标还会是你默认的值，所有需要在pjax完成的

fontawesome-iconpicker：用于Bootstrap的Font Awesome Icon Picker组件

01-30

Fontawesome-iconpicker Font Awesome Icon Picker是一个完全可自定义的Twitter Bootstrap插件，具有基于的强大基础API 您可以使用Font Awesome 5或您选择的其他字体图标集（图标列表是完全可自定义的）。实例化您可以通过几种方式调用插件： // Create instance if not exists (returns a jQuery object) $ ( '.my' ) . iconpicker ( ) ; $ ( '.my' ) . iconpicker ( { /*options*/ } ) ; // you can also specify options via data-* attributes // For the first matched element, access to a plugin property value $ ( '.my' ) . data ( 'iconpicker' ) . iconpickerProperty ; // For the first matche

html的小图标组件,JS组件系列之Bootstrap Icon图标选择组件

weixin_39630813的博客

06-03

741

前言：最近好多朋友在群里面聊到bootstrap icon图标的问题，比如最常见的菜单管理，每个菜单肯定需要一个对应的菜单图标，要是有一个可视化的图标选择组件就好了，最好是直接选择图标，就能得到对应的class样式。于是乎各种百度，皇天不负有心人，最后被博主找到了，感觉效果还不错，并且支持自定义的图标，今天就拿出来分享下，绝对的干货哦！一、Bootstrap icon picker组件这个组件是在...

AngularJS_02_Bootstrap

pre_eminent的JAVA学习园地

11-06

278

这一章讲述 Angular 初始化过程以及必要的时候用户如何能够手动将 Angular 初始化。 Angular <script> 标签下面例子展示了推荐的在应用中使用 Angular 的自动初始化的代码路径设置。 <!doctype html> <html ng-app> <body> ... <script s...

多套知识付费平台源码亲测在用+数据库+一键更新？功能

weixin_46827125的博客

02-18

2567

多套知识付费平台源码亲测在用+数据库+一键更新？功能 A致富学堂V2_3.4.2全解密完整安装包+直播插件+小程序+PC端源码目录 └── A致富学堂V2_3.4.2全解密完整安装包+直播插件+小程序+PC端 ├── 演示公众号：A致富 ………….url ├── 前端 │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── fy_lessonv2 │ │ ├── pages │ │ │ ├── follow │ │

angular2中使用bootstrap样式

sxj的专栏

12-10

1646

1、首先在package.json文件中加入："bootstrap": "^4.1.3",如下图所示： 2、然后重新使用npm install安装，如下图所示： 3、此时在node_modules目录中就有一个bootstrap目录，如下图所示： 4、然后在angular.json中添加 "styles": [ "node_modules/bootstrap/dist/c...

js图标选择器插件

寂寥人生

05-30

265

https://github.com/sh-sabbir/aesthetic-icon-picker https://github.com/furcan/IconPicker