Как я могу сделать свою боковую панель, как этот сайт?

В настоящее время я изучаю, как кодировать html и css, и я не пытаюсь их скопировать. Я просто хочу узнать, как это сделать. Да, это сайт CS: GO, который я знаю. Я хочу узнать, как добавить шрифт awesome icon и сделать его кликабельным, а также как добавить дополнение только к этой иконке. Сайт: skinup.ggКак я могу сделать свою боковую панель, как этот сайт?

Мой тест Веб-сайт: https://jsfiddle.net/a2yweme3/

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; 
}

источник

2017-01-07 Abyssal

Довольно просто с шрифтами удивительным иконки, но вы можете создавать пользовательские значки, создавая картинки и добавляя: hover для создания эффект зависания на фотографиях (как это делает сайт кожи).

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; 
}

источник

2017-01-07 02:26:18 KujAslani

Да, но я хотите, чтобы он остался прежним, как сейчас. Как я могу не изменить внешний вид, а просто изменить, как работают значки, а также как я могу сделать так, чтобы вся коробка была ссылкой? – Abyssal

Вы должны попробовать и изучить себя. Во всяком случае, я внес изменения в обновленную скрипку. – KujAslani

Как я могу сделать свою боковую панель, как этот сайт?

ответ

Смежные вопросы