Nierówne ikony z awesomefont

pytanie zadane 12 marca 2023 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)

Piszę proste menu. Korzystam z ikon z awesomefont. Chciałbym aby przy wyświetlaniu tekst zaczynał się w pionie w tym samym miejscu. Niestety przez to, że ikony z awesomefont nie są równa, również tekst zaczyna się w różnych miejscach... Czy jest możliwość aby to wyrównać?

HTML

<script src="https://kit.fontawesome.com/623fe0c50b.js" crossorigin="anonymous"></script>

<body>

<div class="dash-container">

	<div class="dash-left-column">
	
	<ul>
	
		<li><a href="#"><i class="fa-solid fa-house-user"></i>Home</a></li>
		
		<li><a href="#"><i class="fa-solid fa-chart-column"></i>Data</a></li>
		
		<li><a href="#"><i class="fa-solid fa-calendar-days"></i>Schedule</a></li>
		
		<li><a href="#"><i class="fa-solid fa-boxes-stacked"></i>Products</a></li>
		
		<li><a href="#"><i class="fa-solid fa-message"></i>Message</a></li>
		
		<li><a href="#"><i class="fa-brands fa-firstdraft"></i>Other</a></li>
	
	</div>

</body>

CSS

.dash-container
{
	display:flex;
}

.dash-left-column
{
	width:15%;
	min-width:200px;
}

.dash-left-column i
{
	margin-right:15px;
}

.dash-left-column ul
{
	list-style:none;
	padding:30px;
}

.dash-left-column ul li
{
	list-style:none;
}

.dash-left-column ul li a
{
	color: #9AA1A9;
	list-style:none;
	font-size:1.5rem;
	text-decoration:none;
}

.dash-left-column ul li a:hover
{
	color: #37C1F6;
	list-style:none;
}

2	komentarz 12 marca 2023 przez TOWaD Mądrala (6,000 p.) Jak by dodać taki wpis do css? i { background-color: red; text-align: center; width: 1.5em; text-decoration:none; }

1 odpowiedź

odpowiedź 12 marca 2023 przez Wiciorny Ekspert (270,190 p.)
wybrane 13 marca 2023 przez zbiku25

Najlepsza

Generalnie uczyń ikonę aby była elementem listy:
font-awesome dodaj do klasy fa-fw jak dodasz to do każdego elementu clasy icon to nic wiecej nie musisz robic.
class="fa-solid fa-message fa-fw" (albo na koniec albo obok zaraz po prostu jako skladowa)

     
         <li><a href="#"><i class="fa-solid fa-house-user  fa-fw"></i>Home</a></li>
         
        <li><a href="#"><i class="fa-solid fa-chart-column  fa-fw"></i>Data</a></li>
         
        <li><a href="#"><i class="fa-solid fa-calendar-days  fa-fw"></i>Schedule</a></li>
         
        <li><a href="#"><i class="fa-solid fa-boxes-stacked  fa-fw"></i>Products</a></li>
         
        <li><a href="#"><i class="fa-solid fa-message  fa-fw"></i>Message</a></li>
         
        <li><a href="#"><i class="fa-brands fa-firstdraft  fa-fw"></i>Other</a></li>

Link do tego jak to wygląda: https://jsfiddle.net/8j2tLv56/

2	komentarz 12 marca 2023 przez Wiciorny Ekspert (270,190 p.) jeszcze doc: https://fontawesome.com/docs/web/style/fixed-width

2	komentarz 12 marca 2023 przez TOWaD Mądrala (6,000 p.) fajna stronka i tu coś jeszcze https://fontawesome.com/docs/web/add-icons/svg-symbols#make-sure-to-add-some-css