我想知道是否有可能在不更改HTML的情况下添加Bootstrap glyphicon,并像以下LESS mixin一样使用它:
a {
.glyphicon;
.glyphicon-envelope;
}
任何帮助都将不胜感激。
a {
.glyphicon;
.glyphicon-envelope;
}
任何帮助都将不胜感激。
是的,你可以:
少量的
@import "variables.less";
@import (reference) "glyphicons.less";
a {
.glyphicon;
.glyphicon-envelope;
}
将编译成以下CSS:
a {
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;
}
a:before {
content: "\2709";
}
请注意,如果您想在不使用完整的Bootstrap CSS或将字体定义添加到Less代码的情况下使用CSS,则不应该在@import中使用引用关键字:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}
另外还需要考虑Less的扩展功能:
less
@import "variables.less";
@import (reference) "glyphicons.less";
a {
&:extend(.glyphicon);
&:extend(.glyphicon-envelope all);
}
.glyphicon-envelope
时,它已经设置了伪类,你不必明确设置。 - Bass Jobsen