堆栈内存溢出
  繁体   English   中英

字体真棒图标不对齐

[英]Font Awesome icons don't align

 原文  2020-04-28 07:53:12  0   3    javascript/ html/ css/ font-awesome/ font-awesome-4

问题描述

嘿，我在将我的 FA 图标与按钮对齐时遇到问题。 我不知道为什么会发生这种情况我一直在大致遵循教程并做一些我自己能够解决的事情，但我似乎无法找到解决我的问题的方法。

这就是它的作用

在此处输入图像描述

这是我的 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;

}
*/

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

它还没有完成，但我无法忍受它显示按钮的方式。

3 个解决方案

解决方案1
 1  

试试这个 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;
}

.fa {
      margin-left: -16px;
    margin-top: -16px;
    position: absolute;
}

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;

}
*/

解决方案2
 1 已采纳  2020-04-28 08:22:46

你可以用position相对/绝对模式

.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/

解决方案3
 0  2020-04-28 08:21:19

问题在于你的风格

.trash-btn i

以及您添加到按钮的样式。 在下面找到重构的样式

 * { 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; margin: 4px 2px; height: 40px; width: 40px; border-radius: 50%; border: none; cursor: pointer; }.trash-btn { color: rgb(233, 47, 78); font-size: 2rem; }.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; } */

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 字体真棒图标下拉列表 添加字体真棒图标 字体很棒的图标和切换 切换字体真棒图标 字体真棒图标innerHTML 在字体真棒图标之间切换 字体真棒图标和响应模板 在图标之间切换 Font Awesome 字体真棒或Amcharts 4饼上的图标 jquery 如何在字体真棒图标之间切换
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM