Question

我正在尝试应用我在forkawesome（https://forkaweso.me/Fork-Awesome/icon/discord/）上创建的不和谐徽标

我的代码遇到了一个令人讨厌的问题，因为我试图将不和谐徽标放在一个按钮中，但是每次背景更改时，而不是其中一个按钮：

（我滥用了图标的大小来显示确切的问题）

我也尝试过使用.jpg图像，但当我将鼠标悬停在按钮上时，您可以看到图像的白色背景

      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" name="password" required>
      </div>
      <button type="submit" name="submit" class="btn btn-default">Login</button>
      <a href="scripts/discordLogin.php" class="btn btn-default">Discord Login <span class="fa fa-discord fa-5x" aria-hidden="true" ></span></a>
    </form>
  </div>

如果可以简单地将徽标更改为按钮颜色，那就太好了！

（在评论https://jsfiddle.net/9fmrwyje/中要求的jsfiddle）

Answer 1

您想要吗？

* {
  font-family: arial;
  background-color: #2a3752;
  color: #dcd1d1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  background-color: #2a3752;
}

.discord-logo-btn .fa-discord {
  background: #fff;
}

.discord-logo-btn:hover .fa-discord, .discord-logo-btn:focus .fa-discord  {
  background: #e6e6e6;
}

<!DOCTYPE html>


<html>

<head>
  <meta http-equiv='content-type' content='text/html;charset=utf-8' />
  <title>Login</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
  <link rel="icon" type="image/png" href="images/128.png" />
  <title>Login - JAPC Web management panel</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="container">
    <div style="display: flex; justify-content: center;">
      <img src="images/128.png" alt="Join and play coop logo" align="middle">
    </div>
    <h3 class="text-center">JAPC Web Management panel login</h3>
    <form action="" method="post">
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" class="form-control" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" name="password" required>
      </div>
      <button type="submit" name="submit" class="btn btn-default">Login</button>
      <a href="scripts/discordLogin.php" class="discord-logo-btn btn btn-default">Discord Login <span class="fa fa-discord fa-5x" aria-hidden="true" ></span></a>
    </form>
  </div>
</body>

</html>

Answer 2

为了使不和谐徽标与按钮具有相同的颜色，只需将代码更改为此：

<a href="scripts/discordLogin.php" class="btn btn-default">Discord Login <span class="fa fa-discord fa-5x btn-default" aria-hidden="true" ></span></a>

Answer 3

不需要自定义CSS

使用container在login上添加一个类并删除*{ CSS将CSS添加到.login

body
{
   background-color: #2a3752;
   font-family: arial;
}
.login{
   background-color: #2a3752;
   color: #dcd1d1;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
}

https://jsfiddle.net/lalji1051/rofLg67y/7/

引导按钮中的图像随背景颜色而不是按钮颜色而变化

3 个答案: