时间戳

首页 > 解决方案 > 如何使用 CSS 隐藏 Font-Awesome 图标

html - 如何使用 CSS 隐藏 Font-Awesome 图标

问题描述

我似乎无法成功使用display: none !important;或visibility: hidden;隐藏桌面上的菜单栏和关闭图标。我也尝试将代码应用于我网站上的其他对象（如英雄按钮），但它也不起作用。

但是，您将看到以下代码仅适用于关闭图标的类fa fa-times

HTML 代码：

<!--homepage header -->   
    <section class="header">
        <nav>
            <a href="index.html"> <!--add logo-->
                <img src="" alt=""><!--add links-->
            </a>
            <div class="nav-links">
                <div class="close-icon">
                    <!--menu close icon-->
                    <i class="fas fa-times"></i>
                </div>                
                <ul>
                    <li><a href="">HOME</a></li><!--add links-->
                    <li><a href="">ABOUT</a></li><!--add links-->
                    <li><a href="">SOFTWARE</a></li><!--add links-->
                    <li><a href="">BLOG</a></li><!--add links-->
                    <li><a href="">CONTACT</a></li><!--add links-->
                </ul>
            </div>
            <div class="menu-bars">
                <!--menu icon-->
                <i class="fas fa-bars"></i>
            </div>            
        </nav>

CSS 代码

    @import url("https://kit.fontawesome.com/d68c6a086c.js")

    *{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    }


    .header{
        min-height: 100vh;
        width: 100%;
        /* change image below */
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/ft-870l-500x500.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
    }


    nav {
        display: flex;
        padding: 2% 6%;
        justify-content: space-between;
        align-items: center;
    }

    /* nav bar comapny logo*/
    nav img{
        width: 150px;
    }

    .nav-links{
        flex: 1;
        text-align: right;
    }

    /* list style */
    .nav-links ul li {
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
        position: relative;
    }

    /* each link */
    .nav-links ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

    .nav-links ul li::after{
        content: '';
        width: 100%;
        height: 2px;
        background: #f44336;
        display: block;
        margin: auto;
        transition: 0.5s;
    }

    .nav-links ul li:hover::after{
        width: 100%;
    }

    /* Hide Menu Items for Desktop */
    .close-icon {
        display: none !important;
        visibility: hidden;
    }

    @media (max-width: 700px) {
        .text-box h1{
            font-size: 20px;
        }

        .nav-links ul li {
            display: block;
        }

        .nav-links{
            position: absolute;
            background: #f44336;
            height: 100vh;
            width: 200px;
            top: 0;
            right: 0;
            text-align: left;
            z-index: 2;
        }

        .close-icon {
            display: block;
            color: #fff;
            margins: 10px;
            font-size: 22px;
            cursor: pointer;
        }
    }
    ```

标签： htmlcssfont-awesome

解决方案

请试试

nav {
    display: none;
    /*padding: 2% 6%;
    justify-content: space-between;
    align-items: center;*/
 }

@media (max-width: 700px) {
   nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
  }
 }

在添加 CSS 文件的 head 部分添加

     src="folder/stye.css?v=1.1"

每当您在 CSS 文件中进行更改时，更改v=1.1为1.2或1.3.1等等。

推荐阅读