Как удалить строку ниже в значке Font Awesome? - PullRequest
Новая
       17

Как удалить строку ниже в значке Font Awesome?

0 голосов
/ 30 мая 2019

Я поместил корзину с иконками из Font Awesome в панель навигации.Проблема в том, что эта строка появляется слева внизу в значке корзины, когда я перехожу мышью.Я много чего перепробовал, но не смог найти способ удалить эту строку:

enter image description here

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">

        <title>Σκοτεινή Πλευρά</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

    </head>

    <body>
        <nav>
            <div class="row justify-content-center">
                <div class="Basket">
                    <a href="#">
                        <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                        <span class="Basket_Number">2</span>
                    </a>
                </div>
            </div>
        </nav>
    </body>
</html>

.Basket {
    display: inline-block;
    text-align: center;
    margin-right: 11px;
    margin-bottom: -6px;
}

.Basket a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    font-size: 30px;
    width: 40px;
    height: 40px;
    color: #332f25;
    transition: color 0.3s ease;
    text-decoration: none;
}

.Basket_Number {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 35px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fe4c50;
    font-size: 12px;
    color: white;
}

Ответы [ 2 ]

0 голосов
/ 30 мая 2019

Используйте: hover селектор, чтобы избавиться от подчеркивания при наведении 

.Basket a:hover {
    text-decoration: none;
}
0 голосов
/ 30 мая 2019

Просто добавьте этот CSS, чтобы изменить состояние наведения: 

.Basket :hover {
  text-decoration: none;
}
...