我想添加圖標和單詞到側面導航。但它不起作用

這裏我想在側面導航欄中添加圖標和名稱。但這不起作用。我在我的文件夾中添加一個圖標。但它不是顯示。我想在紅色框中添加5個圖標和徽標，當我點擊圖標時，它應該加載相關頁面。我不是這方面的專家，所以請幫助我一個人。 I want something like this任何幫助將被提及。謝謝。我想添加圖標和單詞到側面導航。但它不起作用

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

 
     .sidemenu { 
 
      position: fixed; 
 
      overflow: hidden; 
 
      top: 0; 
 
      left: 0; 
 
      height: 100%; 
 
      list-style-type: none; 
 
      margin: 0; 
 
      padding: 0; 
 
      background: #000; 
 
     } 
 

 
     .sidemenu li a { 
 
      display: block; 
 
      text-indent: -500em; 
 
      height: 6.5em; 
 
      width: 6.5em; 
 
      line-height: 5em; 
 
      text-align: center; 
 
      color: #999; 
 
      position: relative; 
 
      border-bottom: 1px solid rgba(0,0,0,0.05); 
 
      -webkit-transition: background 0.1s ease-in-out; 
 
      -moz-transition: background 0.1s ease-in-out; 
 
      transition: background 0.1s ease-in-out; 
 
     } 
 

 
     .sidemenu li a:hover, 
 
     .sidemenu li:first-child a{ 
 
      background: #B40404; 
 
      color: #fff; 
 
     } 
 

 
     /* class for current item */ 
 
     .sidemenu li.cbp-vicurrent a { 
 
      background: #000; 
 
      color: #B40404; 
 
     } 
 

 
     .sidemenu li a:before { 
 
      font-family: 'ecoico'; 
 
      speak: none; 
 
      font-style: normal; 
 
      font-weight: normal; 
 
      text-indent: 0em; 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      width: 100%; 
 
      height: 100%; 
 
      font-size: 1.4em; 
 
      -webkit-font-smoothing: antialiased; 
 
     } 
 

 
     .icon-logo{ 
 
      color: white; 
 
     } 
 

 
     /* Example for media query (depends on total height of menu) */ 
 
     @media screen and (max-height: 34.9375em) { 
 

 
      .sidemenu { 
 
       font-size: 10%; 
 
      } 
 

 
     } 
 
     .content{ 
 
      margin-left: 10%; 
 
     } 
 
     span{ 
 
      color: white; 
 
     }

<div class="side"> 
 
<ul class="sidemenu"> 
 
    <li><a href="#" class="icon-logo"><img src="img/logo.png"><span>Dealer</span></a></li> 
 
    <li><a href="#" class="icon-archive"></a></li> 
 
    <li><a href="#" class="icon-search"></a></li> 
 
    <li><a href="#" class="icon-archive"></a></li> 
 
    <li><a href="#" class="icon-search"></a></li> 
 
    <li><a href="#" class="icon-archive"></a></li> 
 
</ul> 
 
</div> 
 

 
<div class="content"> 
 
    
 
</div>

來源

2016-11-20 M_TAM

如何像下面這樣：

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

 
     .sidemenu { 
 
      position: fixed; 
 
      overflow: hidden; 
 
      top: 0; 
 
      left: 0; 
 
      height: 100%; 
 
      list-style-type: none; 
 
      margin: 0; 
 
      padding: 0; 
 
      background: #000; 
 
     } 
 

 
     .sidemenu li a { 
 
      display: block; 
 
      text-indent: -500em; 
 
      height: 6.5em; 
 
      width: 6.5em; 
 
      line-height: 5em; 
 
      text-align: center; 
 
      color: #999; 
 
      position: relative; 
 
      border-bottom: 1px solid rgba(0,0,0,0.05); 
 
      -webkit-transition: background 0.1s ease-in-out; 
 
      -moz-transition: background 0.1s ease-in-out; 
 
      transition: background 0.1s ease-in-out; 
 
     } 
 

 
     .sidemenu li a:hover, 
 
     .sidemenu li:first-child a{ 
 
      background: #B40404; 
 
      color: #fff; 
 
     } 
 

 
     /* class for current item */ 
 
     .sidemenu li.cbp-vicurrent a { 
 
      background: #000; 
 
      color: #B40404; 
 
     } 
 

 
     .sidemenu li a:before { 
 
      font-family: 'ecoico'; 
 
      speak: none; 
 
      font-style: normal; 
 
      font-weight: normal; 
 
      text-indent: 0em; 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      width: 100%; 
 
      height: 100%; 
 
      font-size: 1.4em; 
 
      -webkit-font-smoothing: antialiased; 
 
     } 
 

 
     .icon-logo{ 
 
      color: white; 
 
     } 
 

 
     /* Example for media query (depends on total height of menu) */ 
 
     @media screen and (max-height: 34.9375em) { 
 

 
      .sidemenu { 
 
       font-size: 10%; 
 
      } 
 

 
     } 
 
     .content{ 
 
      margin-left: 10%; 
 
     } 
 
     span{ 
 
      color: white; 
 
     }

<div class="side"> 
 
<ul class="sidemenu"> 
 
    <li><a href="#" class="icon-logo" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li> 
 
    <li><a href="#" class="icon-archive" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li> 
 
    <li><a href="#" class="icon-search" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li> 
 
    <li><a href="#" class="icon-archive" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li> 
 
    <li><a href="#" class="icon-search" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li> 
 
    <li><a href="#" class="icon-archive" style="text-indent: 0em !important;"><img src="http://i.imgur.com/atFETJi.png" style="height:100%;width:100"></a></li> 
 
</ul> 
 
</div> 
 

 
<div class="content"> 
 
    <p>Argh! Here be some content, matey.</p> 
 
</div>

看起來這裏的問題在.sidemenu li a類中是text-indent: -500em;。一旦刪除或更確切地使用text-indent: 0em !important;，圖像似乎開始正確顯示。之後，我只是添加了一些內聯CSS樣式來將圖像/圖標縮放到父容器大小。

注意：忽略幽靈圖標。我碰巧在我的imgur上傳了一些我前幾個月測試過的代碼，所以我想我會用它作爲佔位符代替你的圖標圖像。

編輯：這一切說，我覺得Pytheworld是正確的。我相信，css最初打算用於自定義字體，而不是圖像文件本身。

來源

2016-11-20 07:18:19 SpencerD

It works :)非常感謝。 –

使用Chrome開發人員工具看<img src="img/logo.png">是否載入圖片的URL。

來源

2016-11-20 06:15:09 pytheworld

是的，它顯示圖像加載。 –

嘗試在圖像中添加正確的高度/寬度。

<img src="img/logo.png">

應該是：

<img src="img/logo.png" style='height: 6.5em; width: 6.5em;'>

來源

2016-11-20 06:44:05 qwerty77asdf

我試過你的答案。但仍然無法正常工作。 –

嗯...我看不出任何問題，也許嘗試使用圖像的完整URL（僅用於調試目的） – qwerty77asdf

我嘗試使用字體真棒圖標。

Dealer

但仍然無法正常工作 –

我想你想使用的網頁字體圖標「回聲」，所以你只需要添加的字體在<a>[your web-font icon]</a>，沒有圖像。事情是這樣的CSS：

[class^="icon-"],[class="icon-"]{ 
font-family: 'echoic' !important; 
speak: none; 
font-style: normal; 
font-weight: normal; 
font-variant: normal; 
text-transform: none; 
}

凡在你的HTML：

<ul class="sidemenu"> 
    <li><a href="#" class="icon-logo">[put your web-font entity,maybe"logo"]</a></li> 
    <li><a href="#" class="icon-archive">archive</a></li> 
    <li><a href="#" class="icon-search">search</a></li> 
    <li><a href="#" class="icon-archive"></a></li> 
    <li><a href="#" class="icon-search"></a></li> 
    <li><a href="#" class="icon-archive"></a></li> 
</ul>

，你可以參考本站https://icomoon.io

來源

2016-11-20 06:58:08 pytheworld

我想添加圖標和單詞到側面導航。但它不起作用

回答

相關問題