Question

我目前正在学习如何编写html和css代码而我不是要复制它们我只是想学习如何这样做。是的，它是我知道的CS：GO赌博网站。我想学习如何添加字体真棒图标并使其可点击，以及如何仅在该图标周围添加填充。网站：skinup.gg

HTML：

        <!--Default Stuff-->
    <title>CS:GOAbyss</title>

    <!--Script Links-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/script.js"></script>

    <!--Stylesheet Links-->
    <link rel="stylesheet" text="text/css" href="css/style.css">

    <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

    <!--Font Links-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#">TEST LINK</a></li>
            <li><a href="#">TEST LINK</a></li>
            <li><a href="#">TEST LINK</a></li>
            <li><a href="#">TEST LINK</a></li>
            <li><a href="#">TEST LINK</a></li>
            <li><a href="#">TEST LINK</a></li>
        </ul>
    </div>
</body>

CSS：

/* Default Stuff */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
padding:10px;
border-bottom:2px solid #111;
display: block;
}

ul li a {
background:rgb(41,41,41);
color:#ccc;
text-decoration:none;
margin:10px;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
padding:10px;
background:rgb(125,125,125);
text-align:center;
}

Answer 1

使用font-awesome图标非常简单，但您可以通过创建图片和添加来制作自定义图标：悬停以在图片上创建悬停效果（它是该皮肤网站的工作方式）。

JsFiddle

更新：JsFiddle

添加如下图标：

<li>
   <a href="#" class="navbarLinks">
      <div class="icons">
         <i class="fa fa-money"></i>
      </div>
      <div class="textInfo">TEST LINK
      </div>
   </a>
</li>

通过执行以下操作，在fontawesome图标上创建悬停效果：

.fa-money:hover{
   color: #000;
}

我怎样才能使我的侧边栏像这个网站一样？

1 个答案: