Question

 <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不起作用。我要使图标圈起来。

Answer 1

要显示边框，您需要在样式标签中指定边框样式，即

border: 1px solid black;

请记住另一件事，您可能需要在另一个维度（例如ems或pxs）中声明边框半径样式。确保li元素也具有宽度。

Answer 2

您需要显示背景色或边框

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

我还建议您更改列表元素的宽度，因为它的默认值为100％，并且使用像素而不是百分比作为边框半径。

Answer 3

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

制作一个很棒的字体图标圈

3 个答案: