How to reference bootstrap font icons: first create a fonts folder; then place it in the same directory as the js and css files; finally pass "src: url('font/glyphicons-halflings-regular.eot ');" can be used to reference the font icon.

The operating environment of this tutorial: Windows 7 system, bootstrap version 3. This method is suitable for all brands of computers.

Recommended: "bootstrap Tutorial"

Bootstrap correctly quotes the font icon:

Supplementary:

In fact, you don’t need to go through the trouble below. You only need to create a fonts folder and put it in the same directory as the js and css files, and you can reference it correctly. The key is that the following files must be present:

The first type (please change the path of the font file flexibly)

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('font/glyphicons-halflings-regular.eot');
            src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('font/glyphicons-halflings-regular.woff') format('woff'), url('font/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
        }

The second type

<!--<style type="text/css">
            @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('font/glyphicons-halflings-regular.eot');
    src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
          url('font/glyphicons-halflings-regular.woff') format('woff'), 
          url('font/glyphicons-halflings-regular.ttf') format('truetype'),
          url('font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
   }

Note: Use the font-size attribute to adjust the size of the font icon, and do not will be distorted.

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of How to reference bootstrap font icon. For more information, please follow other related articles on the PHP Chinese website!