javascripthtmlcssfont-awesomefont-awesome-4

Font Awesome icons don't align

Hey I have a problem with aligning my FA icons to buttons. I don't know why this happens I've been roughly following a tutorial and doing some stuff that I'm capable of figuring out on my own but I can't seem to find a solution for my problem.

This is what it does

enter image description here

Here is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
    <link href="./style.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
    <title>To Do List</title>
</head>
<body>
    <head>
        <h1>To Do List</h1>
    </head>
    <form>
        <input type="text" class="todo-input">
        <button class="todo-button">
            <i class="fas fa-plus-square"></i>
        </button>
    </form>
    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>

    <script src="./app.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    /*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
    background-color: #5cdb95;
    color: #0b0c0b;
    font-family: "Bree Serif";
    min-height: 100vh;
}

h1{
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-content: center;
}

form{
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    align-content: center;
}

form input, form button{
    padding: 0.5rem;
    font-size: 2rem;
    border: none;
    background: #edf5e1;
}

form button{
    color: #5cdb95;
    background: #edf5e1;
    cursor: pointer;
    transition: all 0.3s ease;
}

form button :hover{
    color: #46a771;
}

.todo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.todo-list {
    min-width: 50%;
    list-style: none;
}

.todo {
    margin: 0.5rem;
    background: #379683;
    border-radius: 10px;
    text-align: left;
    padding-left: 10px;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.todo li{
    flex: 10%;
}

.trash-btn, .complete-btn {
    background: #5cdb95;
    color: #edf5e1;
    font-size: 1rem;
    padding: 20px;
    margin: 4px 2px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

}

.trash-btn{
    color: rgb(233, 47, 78);
    font-size: 2rem;
}

.trash-btn i{
    vertical-align: middle;
    display: inline-block;
    margin-right: 15px;
}

.complete-btn{
    color: steelblue;
    font-size: 2rem;
}

/*
.trash-btn, .complete-btn {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    border-radius: 50%;
}

.trash-btn, .complete-btn :hover{
    cursor: pointer;
}

.fas fa-fa-check :hover{
    cursor: pointer;

}
*/

And JS

//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

//event listeners
todoButton.addEventListener('click', addTodo);

//functions

function addTodo(event){
    //prevent form from submitting
    event.preventDefault();
   //todo div
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    //create li
    const newTodo = document.createElement("li");
    newTodo.innerText = "hey";
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
    //completed button
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fa fa-check"></i>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);
    //trash button
    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fa fa-minus-circle"></i>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    //append to list
    todoList.appendChild(todoDiv);
}

It's not finished but I can't stand the way it displays the buttons.

Solution

  • You can you pattern position relative/absolute by

    .fa-check, .fa-minus-circle{
  position: absolute;
    top: 5px;
    left: 5px;
}

.trash-btn, .complete-btn {
    background: #5cdb95;
    color: #edf5e1;
    font-size: 1rem;
    padding: 20px;
    margin: 4px 2px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
}

    JSFiddle https://jsfiddle.net/viethien/zp5bv0sn/16/