Question

这里我想在侧面导航中添加图标和名称。但它不起作用。我在我的文件夹中添加了一个图标。但它没有显示。我想在红色框中添加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>

Answer 1

我认为你想使用网络字体图标“echoic”，所以你只需要在<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

Answer 2

使用Chrome开发者工具查看<img src="img/logo.png">是否加载了您的图片网址。

Answer 3

尝试为图片添加正确的高度/宽度。

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

应该是：

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

Answer 4

如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

此处的问题似乎是text-indent: -500em;类中的.sidemenu li a。删除后，或者使用 text-indent: 0em !important; 覆盖后，图像似乎开始正常显示。之后，我只添加了一些内嵌CSS样式，以将图像/图标缩放到父容器大小。

注意：忽略幽灵图标。我碰巧在我的imgur上传中保存了几个月前测试的一些代码，所以我想我会用它作为占位符来代替你的图标图像。

编辑：这一切都说，我认为Pytheworld是正确的。我相信css最初打算用于自定义字体而不是图像文件本身。

我想在侧面导航中添加图标和文字。但它没有用

4 个答案: