The Glyphicon problem in bootstrap

The bootstrap contains a font icon Glyphicon, which basically satisfies most of the UI requirements. Here is a brief summary of how it is used.

The use requirements of the website are as follows:
1. The icon class cannot be used in conjunction with other components directly. They cannot exist with other classes on the same element. You should create a nested span label and apply the icon class to the span label.
2. The icon class can only be applied to elements that do not contain any text content or child elements.
3. Avoid screen reading equipment to crawl unintentional and potentially confusing output (especially when the icons are purely decorative), we set the Aria-hidden= "true" property for these icons.
4 .....

It is tested here that I tags can be used in addition to span, and that there is not much difference when there is no content:
-SPAN tags are used to combine inline elements in a document
-I label renders italic text

Common use:
1. Change the size of the Glyphicon, use the Font-size attribute, the minimum is 12px, then small no change.
2. Change the color of the Glyphicon and use the Color property.
The following is the test code:

<i class= "Glyphicon glyphicon-search" aria-hidden= "true" ></i>
<i class= "Glyphicon Glyphicon-search "Aria hidden=" true "></i>
<!--css-->
<style>
        . glyphicon{
            font-size:12px;
            color:red;
        }
        . glyphicon2{
            font-size:6px;
        }
</style>

There is an episode in the middle, I use BOOTCDN when testing, I do not show, I changed the official website of the CDN source after the use of normal.
In contrast to the two:

<link rel= "stylesheet" href= "//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link rel= "stylesheet" href= "Http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" >

3. Reset its Glyphicon style, similar to the code below. 、

/*less syntax *
/. Icon-default-styles (@top, @left) {
  width:15px;
  height:15px;
  Background:url (@common-icons-sprite) @top @left no-repeat;
  &, &:before, &:after {//Key code, close bootstrap auto-join icon
    content:none;
  }
}
. glyphicon-warning-sign {
  . Icon-default-styles ( -52px, -132px);
}