字体图标未显示，求教~

源自：4-3 CSS样式

字体图标未显示，求教~

根据老师的代码写的，别的都没问题，就是字体图标没有显示出来，查了好久，不知道哪里出问题了，请好心人指教~
$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 18:58

个回答

呼啦啦9527

2018-05-30 10:09:52

解决方法
https://blog.csdn.net/mxf_bear/article/details/80505295

0
行走的指尖

2016-12-08 17:46:20

@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 23:46:34

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

0

我要成为前端大姐大: 2016-08-11 23:40:41

$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;
}

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

LiuYina: 2016-05-07 18:31:09

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

在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');
}

表示现在只知道这样做

（心里好苦）

IHaveADreamD

2016-03-15 19:01:31

如右图：

0