Very good two Bootstrap Icon selection components, bootstrapicon

Very good two Bootstrap Icon selection components, bootstrapicon

I. Bootstrap icon picker component

This component was found during the search on github. It looks good at the beginning and is based on the bootstrap style. Therefore, it is more suitable for projects with the bootstrap style layout. Since it is on github, there is no doubt that this is an open source component and the source code address. Well, let's take a look at how it looks.

1. Component effect Preview

First Initialization

Supports "previous" and "Next"

Allows you to select custom icons.

Fuzzy search icons are supported. For example, you can search for camera.

Select the icon and put the corresponding style in the text box.

2. Component code example
(1) common usage
This component is based on bootstrap and jquery. The file to be referenced is as follows:

 　 <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js"></script>

Place a common input text box on the html page

 <input type="text" class="form-control" id="txt_boostrap_icon">

JS Initialization

$ (Function () {// bootstrap icon initialization $ ("# txt_boostrap_icon"). iconPicker ();});

In this way, you can see the effect after initialization. Youmu has a very simple experience ~~

Then we need to obtain the selected value, which is no different from the usage of the common input text box var bootstrap_icon = $ ("# txt_boostrap_icon"). val ();

(2) custom icons

We can see that after initialization using the above method, the number of icons is fixed to dozens. What if we need to add some icons of our own to it? Or, we need to use a background image as an icon. What should we do? Don't worry, there will always be a solution! Let's take a brief look at its js source code:

There are more than one hundred lines of code in total, which is not difficult to understand. Let's take a look at the variable icons in the red line above, and find that the array contains a set of all our icons. Let's take a look at the generated html source code.

From this we can guess whether a custom style can also be named glyphicon-some of these styles customize icons? With this idea, we add two new styles to the css file.

Add test11, test12, test13, and test14 to the icons variable.

Copy codeThe Code is as follows: var icons = new Array ("adjust", "align-center", "align-justify", "align-left", "align-right ", "arrow-down", "arrow-left", "arrow-right", "arrow-up ",......... "zoom-out", "test11", "test12", "test13", "test14 ");

All right, all done. Next, refresh the page to see the effect.

Therefore, the biggest benefit of this component is the convenience of extending its own icons, whether it is written in content or using background images, it can be seamlessly integrated. Lever!

Ii. jQuery fontIconPicker component

Jquery fonticonpicker was accidentally found when the blogger looked for the jquery plug-in. It doesn't matter if he didn't find it. After careful research, he found that this component was really good, especially the interface effect was great. It is also open-source and provides comprehensive documentation and rich functions.

1. Component effect Preview

During initialization, there are four custom themes (bloggers prefer the first bootstrap style)

Pagination supported

Top mouse Effect

Support fuzzy search

Allows you to customize the number of icons displayed on each page.

Effect after selecting an icon

2. Component code example
(1) common usage
This group does not support bootstrap, but supports jquery. in our test, we also reference bootstrap.css.

<script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js"></script> <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />

The effect is so dazzling that there will inevitably be more referenced files.

Let's take a look at html preparation.

1) static html

<select id="myselect" name="myselect" class="myselect">    <option value="">No icon</option>    <option>icon-user</option>    <option>icon-search</option>    <option>icon-right-dir</option>    <option>icon-star</option>    <option>icon-cancel</option>    <option>icon-help-circled</option>    <option>icon-info-circled</option>    <option>icon-eye</option>    <option>icon-tag</option>    <option>icon-bookmark</option>    <option>icon-heart</option>    <option>icon-thumbs-down-alt</option>    <option>icon-upload-cloud</option>    <option>icon-phone-squared</option>    <option>icon-cog</option>    <option>icon-wrench</option>    <option>icon-volume-down</option>    <option>icon-down-dir</option>    <option>icon-up-dir</option>    <option>icon-left-dir</option>    <option>icon-thumbs-up-alt</option>    </select>

2) if it is a dynamic setting icon, you only need to put an empty select.

<select id="myselect" name="myselect" class="myselect"></select>

JS Initialization

1) Static initialization (option has been written in select)

$ (Function () {// jquery icon initialization $ ('# myselect'). fontIconPicker (); // Load with default options });

2) Dynamic initialization (for empty select tags)

$ (Function () {// jquery icon initialization $ ('# myselect '). fontIconPicker ({theme: 'fip-bootstrap ', // four theme styles: fip-gray, fip-darkgrey, fip-bootstrap, fip-inverted source: ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart ", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt ", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam ", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th ", "icon-th-list", "icon-OK", "icon-OK-circled", "icon-ok-circled2", "icon-OK-squared", "icon-cancel ", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared ", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared ", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled ", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext ", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt ", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark ", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up ", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload ", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward ", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt ", "icon-penpencil", "icon-penpencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard ", "icon-gamepad", "icon-comment", "icon-chat", "icon-chat-empty", "icon-bell", "icon-bell-alt ", "ion-android-alert", "ion-android-apps"], emptyIcon: true, // whether to display empty emptyIconValue: "none", // null isperpage: 30, // The number of icons displayed on each page. The default value is 20 hasSearch: true, // whether to display the try box. The default value is true });});

In fact, it is also very simple. There are just a few parameters that can be set. The corresponding comments have been written in the code, so I will not explain them too much here.

Similarly, to obtain the selected value, you can directly use jquery's val.

(2) custom icons
After reading the custom icon of the bootstrap icon above, are you still wondering whether this component can support customization. The same is true for bloggers. Okay? Let's try it first.

1) An error occurred while trying to use the icon of the background image.

First, define a style that uses the background image directly on the page.

<style type="text/css"> .glyphicon-test13 {  background: url('/Content/images/icons/p13.png') no-repeat center center!important;  height: 15px!important;  width: 14px!important; }</style>

Then put the "glyphicon-test13" into the end of the array corresponding to the initialization source, it seems that the success. Let's refresh the interface.

Contrary to expectations, the icon background image cannot be displayed normally. Why? Curiosity is coming again. Let's look at the review elements:

Originally, this component generates an I tag, which is different from the span above. A span can be used as a container, but only as an italic tag. Therefore, this attempt fails. But it is not convinced. Do you mean that the I tag is not a container that has no actual placeholder? Can we write multiple lines of space in I?

After adding spaces to the I tag, you can see that the image is displayed. It seems that the problem is solved perfectly! However, it is too early to be happy, because the selected I tag is still empty. In general, this method can be used as a reference train of thought. Later I have time to check whether the source code can be modified to implement this function. At this stage, custom background images are not supported!

2) use the css-written icon to try and the result is successful.

Since the custom background image does not work, if we customize the icon, that is, if we all write the icon through: before {content: ""}, can we? The answer is yes. We found a website for storing icons, downloaded the icon package, and referenced it on our project page.

Choose "ion-android-archive" and "ion-android-arrow-back" at the end of the array corresponding to the initialization source. Refresh page

Selected

Iii. Comparison
The above is an example of using the two icon selection components. In comparison, such components have their own advantages and disadvantages.

1. From the interface effect, the second (jquery fontIconPicker) is better than the first (Bootstrap icon picker), the interface is more dazzling, and the user experience is better. This is not controversial.

2. In terms of lightweight components, the first type is better than the second type. Obviously, the second type references so much css, which will definitely lead to component bloated more or less.

3. From the perspective of ease of use, the first method is simpler to use and easier to expand. The second method is more comprehensive, with many customizable items and flexible to use, however, there is a problem with the custom background image.

Now, this article is here. You can use this icon to select components for your project.

Articles you may be interested in:

• Bootstrap glyphicons font icons