                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /側(cè)欄工具條開(kāi)發(fā)

字體圖標(biāo)未顯示，求教~

根據(jù)老師的代碼寫(xiě)的，別的都沒(méi)問(wèn)題，就是字體圖標(biāo)沒(méi)有顯示出來(lái)，查了好久，不知道哪里出問(wèn)題了，請(qǐng)好心人指教~
$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賬號(hào)";
}
}
}

.toolbar-item-feedback?{
.toolbar-btn?{
&:before?{
content:?"\e901";
}
&:after?{
content:?"意見(jiàn)\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

源自：側(cè)欄工具條開(kāi)發(fā) 4-3

關(guān)注問(wèn)題我要回答

2714

操作

收起

6 回答

呼啦啦9527
2018-05-30

解決方法

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

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

行走的指尖
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 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

zwarvin
2016-08-16

解決了沒(méi)？？ ? 遇到同樣的問(wèn)題了，求告知

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

我要成為前端大姐大
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賬號(hào)";
????}
??}
??&:after?{
????content:?"";
????height:?210px;
????background-position:?0?0;
??}
}
.toolbar-item-feedback?{
??.toolbar-btn?{
????&:before?{
??????content:?"\e96e";
????}
????&:after?{
??????content:?"用戶(hù)\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?{//圖標(biāo)字體元素的父元素
??position:?absolute;
??left:?0;
??top:?0;
??width:?$toolbar-size;
??height:?$toolbar-size;
??overflow:?hidden;
??//font字體圖標(biāo)里面的公共樣式
??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圖標(biāo)字體
??&: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圖標(biāo)文字
??&: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;
}

圖片路徑出現(xiàn)問(wèn)題了，你找到的圖標(biāo)路徑，添加進(jìn)去就行

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

LiuYina
2016-05-07

路徑問(wèn)題。。。。（表示找了倆小時(shí)才知道怎么回事）

在css文件最上面添加上圖標(biāo)的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');
}

表示現(xiàn)在只知道這樣做

（心里好苦）

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

zwarvin

確定是這樣？我圖片路徑是這樣的，文件目錄也沒(méi)有問(wèn)題，真心找出什么問(wèn)題啊，已經(jīng)磨了一兩個(gè)小時(shí)了

2016-08-16 回復(fù) 有任何疑惑可以回復(fù)我~

#2

LiuYina 回復(fù) zwarvin

那你試試用絕對(duì)路徑，，也就是在哪個(gè)盤(pán)，那個(gè)文件中就好像 url('D:/***/***/*****/fonts/icomoon.eot?qf81d4#iefix')

2016-08-17 回復(fù) 有任何疑惑可以回復(fù)我~