сделать шрифт крутой значок круга - PullRequest
Новая
       6

сделать шрифт крутой значок круга

0 голосов
/ 19 сентября 2018 
 <div class="team-icon">
            <ul>
                <li class="fab fa-facebook" style="border-radius: 50%"></li>
                <li class="fab fa-twitter-square"></li>
                <li class="fab fa-google-plus"></li>
            </ul>
        </div>

Это мой код, но border-radius не работает.Я хочу сделать иконки кругом.

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

Вам нужен фоновый цвет или отображаемая граница 

<ul>
    <li style=“border-radius:5px;border:1px solid black;width:10%;”>List Item</li>
</ul>

Я также рекомендую изменить ширину элемента списка, потому что он по умолчанию равен 100% и использует пиксели вместо процента для радиуса границы,

0 голосов
/ 14 ноября 2018 

.team-icon ul {
    list-style-type: none;
    display: flex;
}

.team-icon li {
    background: blue;
    border-radius: 50%;
    margin: 0 5px;
}

.team-icon a {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 100%;
    text-decoration: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div class="team-icon">
    <ul>
        <li>
            <a href="#">
                <i class="fab fa-facebook"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fab fa-twitter-square"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fab fa-google-plus"></i>
            </a>
        </li>
    </ul>
</div>
0 голосов
/ 19 сентября 2018

Чтобы отобразить границу, вам нужно указать стиль границы в вашем теге стиля, например 

border: 1px solid black;

Еще одна вещь, которую нужно иметь в виду, возможно, вам нужно объявить стиль радиуса границыв другом измерении, например, ems или pxs.Убедитесь, что ваши элементы li имеют ширину.

...