为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/侧栏工具条开发

字体图标未显示，求教~

根据老师的代码写的，别的都没问题，就是字体图标没有显示出来，查了好久，不知道哪里出问题了，请好心人指教~
$toolbar-size: 52px;

.toolbar {
position: fixed;
left: 50%;
bottom: 5px;
margin-left: -$toolbar-size / 2;
}

.toolbar-item {
position: relative;
display: block;
width: $toolbar-size;
height: $toolbar-size;
margin-top: 1px;

&:hover {
.toolbar-btn {
&:before {
top: -$toolbar-size;
}
&:after {
top: 0;
}
}
&:after {
@include opacity(1);
@include scale(1);
}
}

&:after {
content: "";
position: absolute;
right: $toolbar-size - 6;
bottom: -10px;
width: 172px;
background: url(../imgs/toolbar_img.png) no-repeat;
@include opacity(0);
@include transform-origin(95% 95%);
@include scale(0.01);
@include transition(all 1s);
}
}

.toolbar-item-weixin {
&:after {
content: "";
height: 212px;
background-position: 0 0;
}

.toolbar-btn {
&:before {
content: "\e900";
}
&:after {
content: "公众\A账号";
}
}
}

.toolbar-item-feedback {
.toolbar-btn {
&:before {
content: "\e901";
}
&:after {
content: "意见\A反馈";
}
}
}

.toolbar-item-app {
&:after {
content: "";
height: 194px;
background-position: 0 -222px;
}

.toolbar-btn {
&:before {
content: "\e903";
}
&:after {
content: "APP\A下载";
}
}
}

.toolbar-item-top {
.toolbar-btn {
&:before {
content: "\e902";
}
&:after {
content: "返回\A顶部";
}
}
}

.toolbar-btn {
position: absolute;
left: 0;
top: 0;
width: $toolbar-size;
height: $toolbar-size;
overflow: hidden;

font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

&:before { 
content: "";
position: absolute;
left: 0;
top: 0;
width: $toolbar-size;
height: $toolbar-size;
background-color: #D0D6D9;
font-size: 30px;
color: #fff;
text-align: center;
line-height: $toolbar-size;
@include transition(top 1s);
}

&:after { 
content: "";
position: absolute;
left: 0;
top: $toolbar-size;
width: $toolbar-size;
height: $toolbar-size;
background-color: #98A1A6;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 1.2;
padding-top: 12px;
@include transition(top 1s);
white-space: pre;
}
}

IHaveADreamD

2016-03-15

源自：侧栏工具条开发  4-3

关注问题 我要回答
2717
操作
收起

正在回答

6 回答

呼啦啦9527
2018-05-30

解决方法

https://blog.csdn.net/mxf_bear/article/details/80505295

0 回复 有任何疑惑可以回复我~
收起回答
行走的指尖
2016-12-08

@font-face {

  font-family: 'icomoon';

  src:  url('fonts/icomoon.eot?bmt6bq');

  src:  url('fonts/icomoon.eot?bmt6bq#iefix') format('embedded-opentype'),

    url('fonts/icomoon.ttf?bmt6bq') format('truetype'),

    url('fonts/icomoon.woff?bmt6bq') format('woff'),

    url('fonts/icomoon.svg?bmt6bq#icomoon') format('svg');

  font-weight: normal;

  font-style: normal;

}

这段加载css代码里

0 回复 有任何疑惑可以回复我~
收起回答
zwarvin
2016-08-16

解决了没？？   遇到同样的问题了，求告知

0 回复 有任何疑惑可以回复我~
收起回答
我要成为前端大姐大
2016-08-11 
$toolbar-size: 52px;
.toolbar {
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}
.toolbar-item {
  position: relative;
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  margin-top: 1px;
  &:hover {
    .toolbar-btn {
      &:before {
        top: -$toolbar-size;
      }
      &:after {
        top: 0;
      }
    }
    &:after{
      @include opacity(1);
      @include scale(1);
    }
  }
  //二维码
  &:after {
    content: "";
    position: absolute;
    right: $toolbar-size - 6;
    bottom: -5px;
    width: 172px;
    background-image: url(../img/toolbar_img.png);
    background-repeat: no-repeat;
    @include opacity(0);
    @include transform-origin(95% 95%);
    @include scale(0.01);
    @include transition(all 1s);
  }
}
.toolbar-item-weixin {
  .toolbar-btn {
    &:before {
      content: "\e900";
    }
    &:after {
      content: "公共\A账号";
    }
  }
  &:after {
    content: "";
    height: 210px;
    background-position: 0 0;
  }
}
.toolbar-item-feedback {
  .toolbar-btn {
    &:before {
      content: "\e96e";
    }
    &:after {
      content: "用户\A反馈";
    }
  }
}
.toolbar-item-app {
  .toolbar-btn {
    &:before{
      content: "\e958";
    }
    &:after {
      content: "app \A下载";
    }
  }
  &:after {
    content: "";
    height: 190px;
    background-position: 0 -220px;
  }
}
.toolbar-item-top {
  .toolbar-btn {
    &:before {
      content: "\ea25";
    }
    &:after {
      content: "返回\A顶部";
    }
  }
}
.toolbar-btn {//图标字体元素的父元素
  position: absolute;
  left: 0;
  top: 0;
  width: $toolbar-size;
  height: $toolbar-size;
  overflow: hidden;
  //font字体图标里面的公共样式
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  //icon图标字体
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: $toolbar-size;
    height: $toolbar-size;
    background-color: #d0d6d9;
    font-size: 30px;
    color: #ffffff;
    text-align: center;
    line-height: $toolbar-size;
    @include transition(top 1s)
  }
  //text图标文字
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: $toolbar-size;
    width: $toolbar-size;
    height: $toolbar-size;
    background-color: #98a1a6;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    padding-top: 12px;
    @include transition(top 1s)
  }
  white-space: pre;
}

图片路径出现问题了，你找到的图标路径，添加进去就行

0 回复 有任何疑惑可以回复我~
收起回答
LiuYina
2016-05-07

路径问题。。。。（表示找了俩小时才知道怎么回事）

在css文件最上面添加上图标的style文件中的定义路径的（就是。。。

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?qf81d4');
 src:    url('fonts/icomoon.eot?qf81d4#iefix') format('embedded-opentype'),
         url('fonts/icomoon.ttf?qf81d4') format('truetype'),
         url('fonts/icomoon.woff?qf81d4') format('woff'),
         url('fonts/icomoon.svg?qf81d4#icomoon') format('svg');
}

表示现在只知道这样做

（心里好苦）


1 回复 有任何疑惑可以回复我~
收起回答
#1

zwarvin

确定是这样？ 我图片路径是这样的，文件目录也没有问题，真心找出什么问题啊，已经磨了一两个小时了
2016-08-16 回复 有任何疑惑可以回复我~
#2

LiuYina 回复 zwarvin

那你试试用绝对路径，，也就是在哪个盘，那个文件中 就好像 url('D:/***/***/*****/fonts/icomoon.eot?qf81d4#iefix')
2016-08-17 回复 有任何疑惑可以回复我~
#3

zwarvin 回复 LiuYina

还是不行
2016-08-17 回复 有任何疑惑可以回复我~
IHaveADreamD 提问者
2016-03-15

如右图：http://img1.sycdn.imooc.com//56e7eb75000144a603290283.jpg

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
侧栏工具条开发
  • 参与学习       68218    人
  • 解答问题       317    个

带动画效果的工具条，掌握如何用CSS3完成简单的动画效果

进入课程

本课相似问答

5 回答第三种伪元素方法引入字体图标 字体图标没有显示

2 回答图标字体下载不对

1 回答图标不显示

1 回答图标显示不同

3 回答为什么我的不能显示字体
搜索更多本课相关问答

字体图标未显示，求教~

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号