有没有可能使用引导程序将图标(font真棒)作为按钮



希望你没事。我想做的是使用一个字体很棒的图标,并能够将其用作按钮。这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-6 align-items-stretch">
<i class=""></i>
<a href="https://github.com/IsmaElzem?tab=repositories" class="fas fa-at fa-3x mt-3"></a>
<p class="h5">Mail</p>
</div>
<div class="col-6 align-items-stretch">
<a href="https://www.linkedin.com/in/isma%C3%ABl-zemmouj-02b235128/" class="fab fa-linkedin fa-3x mt-3"></a>
<p class="h5">LinkedIn</p>
</div>
</div>
</div>
</body>
</html>

但如果你正在看结果,图标现在是bleu,下面有一条线。有可能没有这个颜色,并删除图标下面的线吗?

有线

您需要添加一些额外的CSS来实现这一点。这可以帮助

a{
text-decoration:none;
color:orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<style>
a{
text-decoration:none;
color:orange;
}
</style>
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-6 align-items-stretch">
<i class=""></i>
<a href="https://github.com/IsmaElzem?tab=repositories" class="fas fa-at fa-3x mt-3"></a>
<p class="h5">Mail</p>
</div>
<div class="col-6 align-items-stretch">
<a href="https://www.linkedin.com/in/isma%C3%ABl-zemmouj-02b235128/" class="fab fa-linkedin fa-3x mt-3"></a>
<p class="h5">LinkedIn</p>
</div>
</div>
</div>
</body>
</html>

这个css代码怎么样?

a {
text-decoration: none;
color: red;
}

最新更新