css - Fontawesome加载程序不与伪类一起旋转:before

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        4年前关闭。



我正在尝试做一个简单的装载机
使用:before像这样：

的CSS

.mytest {
  .loader{
    text-align: center;
    background-color: green;
    position: relative;
    z-index: 9999;
    &::before {
      &:extend(.fa);
      &:extend(.fa-circle-o-notch);
      &:extend(.fa-spin);
      background-color: green;
      color: red;
      content: "\f1ce";
      font-family: FontAwesome;
      font-size: 3em;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      width: 100%;
    }
  }
}

的HTML

<div class="row">
  <div class="col-md-6 mytest">
    <div class="loader"></div>
    <div class="content"><h1>Content</h1></div>
  </div>
</div>

我可以看到该图标，但它不会旋转
怎么了？

最佳答案

首先，您的css文件看起来像scss文件。
在这种情况下，extend看起来是错误的：

&::before {
  &:extend(.fa);
  &:extend(.fa-circle-o-notch);
  &:extend(.fa-spin);

外观正确：

&::before {
  @extend .fa;
  @extend .fa-circle-o-notch;
  @extend .fa-spin;

但是在这种情况下，它仍然无法工作，因为（来自Font Awesome指南的信息）：

启动并运行后，您可以使用<i>标签将“真棒字体”图标放置在几乎任何地方

我将使用HTML并使用spinner做一个简单的例子：

<div class="row">
  <div class="col-md-6">
    <div class="loader">
      <i class="fa fa-circle-o-notch fa-spin"></i>
    </div>
    <div class="content">
      <h1>Content</h1>
    </div>
  </div>
</div>

jsfiddle-example

如果要在某些元素之前达到spinner，则可以使用其他css样式

关于css - Fontawesome加载程序不与伪类一起旋转:before ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34606941/

上一篇：jquery - 单击顶部 div 时底部 div 滑动

下一篇：html - 基于数据库为Web应用程序创建菜单有什么好处？

相关文章：

html - 为什么我的 containing span 比我的 svg 大？

html - 全屏图像上的 CSS 幻灯片动画

html - 如何让 2 个嵌套表彼此相邻而不是在顶部？

css - 使用 flex-wrap 的 flex box 没有达到全高

javascript - 自定义 Reactjs Checkbox 组件需要动态颜色

javascript - 为什么 FontAwesome 建议通过 .js 脚本而不是 CDN 链接包含？

css - 如何使用 flexbox 将我的元素每行对齐两个元素？

css - Ionic 3 卡片按钮未显示在卡片的右下方

angular - 在index.html内的Angular 6中使用font-awesome图标

jquery - 如何在 Select2 中插入 FontAwesome