twitter-bootstrap – 附加LESS的Bootstrap glyphicon,没有html

发布时间：2020-12-17 20:38:08 所属栏目：安全来源：网络整理

导读：我想知道是否有可能在不触及 HTML的情况下附加Bootstrap glyphicon并将其用作LESS mixin,如下所示： a { .glyphicon; .glyphicon-envelope;} 任何帮助,将不胜感激. 解决方法是的你可以：减 @import "variables.less";@import (reference) "glyphicons.less

我想知道是否有可能在不触及 HTML的情况下附加Bootstrap glyphicon并将其用作LESS mixin,如下所示：

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的情况下使用CSS或将字体定义添加到Less代码中,则不应将reference关键字与@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');
}

还要考虑extend feature的Less：

减

@import "variables.less";
@import (reference) "glyphicons.less";

a {
 &:extend(.glyphicon);
 &:extend(.glyphicon-envelope all);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!