Question

使用folowwing fontowesome社交媒体链接，需要围绕社交媒体徽标绘制一个圆圈。怎么办呢？

<ul class="social-media list-inline" align="right">
                    <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                    <li><a href="#"><span class="fa fa-envelope"></span></a></li>
                    <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                    <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
                    <li><a href="#"><span class="fa fa-instagram"></span></a></li>
                    </ul>

我将选择以下css文件

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

Answer 1

＆＃13;

.social-media li {
  list-style-type: none;
  padding: 10px 10px;
  background-color: pink;
  display: inline-block;
  border-radius: 50px;
}

＆＃13;

<html>
  <head>
  <script src="https://use.fontawesome.com/a2e210f715.js"></script>
  </head>
  <body>
    <ul class="social-media">      
      <li><a href="#"><span class="fa fa-envelope"></span></a></li>
      <li><a href="#"><span class="fa fa-twitter"></span></a></li>
      <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
      <li><a href="#"><span class="fa fa-instagram"></span></a></li>
    </ul>
  </body>
</html>

＆＃13;

通过使用border-radius和padding，我们可以围绕图标形成一个圆圈。

Answer 2

<head>
<link rel="stylesheet" type="text/css" href="your file name.css">
</head>

将每个

包装在带有id圈的div中它可能会为您提供圆形图标

如何将外部css与index.html文件组合在一起

2 个答案: