#html #css #fonts #alignment
#HTML #css #шрифты #выравнивание
Вопрос:
Я пробовал различные методы в css для выравнивания значков по тексту, но значки выглядят немного сдвинутыми вверх от базовой линии текста.
Я обращаюсь к значкам с:
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
} <html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<a href="#home"><i class="fa fa-fw fa-home"></i> Home </a>
<a href="#archive"><i class="fas fa-archive"></i></i> Archive </a>
<a href="#newfile"><i class="fas fa-folder-open"></i> New File </a>
<a href="#analytics"><i class="fas fa-chart-pie"></i> Analytics </a>
<a href="#contacts"><i class="fas fa-address-book"></i> Contacts </a>
<a href="#putoutfire"><i class="fas fa-dumpster-fire"></i> Hero </a>
<a href="#search"><i class="fas fa-search"></i> Search </a>
<a href="#help"><i class="fas fa-life-ring"></i> Help </a>
</div>
</body>
</html> Это странно, потому что это хорошо выглядит в редакторе сообщений, но не тогда, когда я запускаю его в браузере для VS code. Любая помощь по выравниванию значков приветствуется.
Ответ №1:
Вы ищете что-то подобное?
Я применил text-align: right к каждому значку. — Некоторые формы / размеры значков больше, чем другие, поэтому, возможно, отрегулируйте их по отдельности, пока не будете довольны результатом.
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
} <html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<a href="#home"><i style="text-align: right;" class="fa fa-fw fa-home"></i> Home </a>
<a href="#archive"><i style="text-align: right;" class="fas fa-archive"></i></i> Archive </a>
<a href="#newfile"><i style="text-align: right;" class="fas fa-folder-open"></i> New File </a>
<a href="#analytics"><i style="text-align: right;" class="fas fa-chart-pie"></i> Analytics </a>
<a href="#contacts"><i style="text-align: right;" class="fas fa-address-book"></i> Contacts </a>
<a href="#putoutfire"><i style="text-align: right;" class="fas fa-dumpster-fire"></i> Hero </a>
<a href="#search"><i style="text-align: right;" class="fas fa-search"></i> Search </a>
<a href="#help"><i style="text-align: right;" class="fas fa-life-ring"></i> Help </a>
</div>
</body>
</html> Ответ №2:
Это поможет вам.
Я заметил, что изображения имеют разный размер. Я скорректировал размер и изменил класс home.
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
width:20px;
height:20px;
} <html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<a href="#home"><i class="fas fa-home"></i> Home </a>
<a href="#archive"><i class="fas fa-archive"></i></i> Archive </a>
<a href="#newfile"><i class="fas fa-folder-open"></i> New File </a>
<a href="#analytics"><i class="fas fa-chart-pie"></i> Analytics </a>
<a href="#contacts"><i class="fas fa-address-book"></i> Contacts </a>
<a href="#putoutfire"><i class="fas fa-dumpster-fire"></i> Hero </a>
<a href="#search"><i class="fas fa-search"></i> Search </a>
<a href="#help"><i class="fas fa-life-ring"></i> Help </a>
</div>
</body>
</html> Я изменил эти коды:
<a href="#home"><i class="fa fa-fw fa-home"></i> Home </a><!--deleted fa-fw and fa-->
<a href="#home"><i class="fas fa-home"></i> Home </a><!--inserted fas-->
и я вставляю этот код:
i {
float: right;
width:20px;//inserted
height:20px;//inserted
}
Комментарии:
1. Большое вам спасибо. Я даже не рассматривал размер значка.