bootstrap4.0图标使用_Bootstrap4 glyphicon 移除图标 glyphicon fonts-faces 解决方案

bootrap3是支持的图标 ，4不支持

4已经移除了 收费图标，取而代之建议使用其他的，比如 https://octicons.github.com/ 和http://fontawesome.io/ 但是3和4我都用过的，直接扣下了3里面的部分。

如图目录结构：

您可以将一下代码copy到您引入的bootstrap-4.0.0-dist/css/bootstrap.css 文件中

注意：(注意：如下代码依赖glyphicons-.eot、glyphicons-.ttf、glyphicons-*.svg 文件)

@font-face {

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');

src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

}

.glyphicon {

position: relative;

top: 1px;

display: inline-block;

font-family: 'Glyphicons Halflings';

font-style: normal;

font-weight: normal;

line-height: 1;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.glyphicon-asterisk:before {

content: "\002a";

}

.glyphicon-plus:before {

content: "\002b";

}

.glyphicon-euro:before,

.glyphicon-eur:before {

content: "\20ac";

}

.glyphicon-minus:before {

content: "\2212";

}

.glyphicon-cloud:before {

content: "\2601";

}

.glyphicon-envelope:before {

content: "\2709";

}

.glyphicon-pencil:before {

content: "\270f";

}

.glyphicon-glass:before {

content: "\e001";

}

.glyphicon-music:before {

content: "\e002";

}

.glyphicon-search:before {

content: "\e003";

}

.glyphicon-heart:before {

content: "\e005";

}

.glyphicon-star:before {

content: "\e006";

}

.glyphicon-star-empty:before {

content: "\e007";

}

.glyphicon-user:before {

content: "\e008";

}

.glyphicon-film:before {

content: "\e009";

}

.glyphicon-th-large:before {

content: "\e010";

}

.glyphicon-th:before {

content: "\e011";

}

.glyphicon-th-list:before {

content: "\e012";

}

.glyphicon-ok:before {

content: "\e013";

}

.glyphicon-remove:before {

content: "\e014";

}

.glyphicon-zoom-in:before {

content: "\e015";

}

.glyphicon-zoom-out:before {

content: "\e016";

}

.glyphicon-off:before {

content: "\e017";

}

.glyphicon-signal:before {

content: "\e018";

}

.glyphicon-cog:before {

content: "\e019";

}

.glyphicon-trash:before {

content: "\e020";

}

.glyphicon-home:before {

content: "\e021";

}

.glyphicon-file:before {

content: "\e022";

}

.glyphicon-time:before {

content: "\e023";

}

.glyphicon-road:before {

content: "\e024";

}

.glyphicon-download-alt:before {

content: "\e025";

}

.glyphicon-download:before {

content: "\e026";

}

.glyphicon-upload:before {

content: "\e027";

}

.glyphicon-inbox:before {

content: "\e028";

}

.glyphicon-play-circle:before {

content: "\e029";

}

.glyphicon-repeat:before {

content: "\e030";

}

.glyphicon-refresh:before {

content: "\e031";

}

.glyphicon-list-alt:before {

content: "\e032";

}

.glyphicon-lock:before {

content: "\e033&#