个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的问题有点愚蠢，但我真的不明白这个 Fontawesome 的东西。所以我想做的是在这段代码中放一些图标:
<html>
<head>
<script src="https://use.fontawesome.com/cea00496c5.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style>
input.knopf {
background-color: #f4511e;
border: none;
color: white;
text-align: center;
font-size: 32px;
margin: 0px 0px;
opacity: 0.3;
transition: 1;
width: 100%;
height: 100%;
padding: 25px;
}
input.knopf:hover {
opacity: 1;
background-color: #f4511e;
color: white;
}
input.knopf2 {
background-color: lightseagreen;
border: none;
color: white;
text-align: center;
font-size: 32px;
margin: 0px 0px;
opacity: 0.7;
transition: 1;
width: 100%;
height: 100%;
padding: 25px;
}
input.knopf2:hover {
opacity: 1;
background-color: lightseagreen;
color: white;
}
input.knopf3 {
background-color: blueviolet;
border: none;
color: white;
text-align: center;
font-size: 32px;
margin: 0px 0px;
opacity: 0.7;
transition: 1;
width: 100%;
height: 100%;
padding: 25px;
}
input.knopf3:hover {
opacity: 1;
background-color: blueviolet;
color: white;
}
input.knopf4 {
background-color: blue;
border: none;
color: white;
text-align: center;
font-size: 32px;
margin: 0px 0px;
opacity: 0.7;
transition: 1;
width: 100%;
height: 100%;
padding: 25px;
}
input.knopf4:hover {
opacity: 1;
background-color: deepskyblue;
color: white;
}
</style>
</head>
<body>
<h1>Wählen Sie aus in welchem Thema Sie Hilfe brauchen</h1>
<table>
<form></form>
<tr>
<th><input class="knopf " type="button" value="Microsoft Outlook" onclick="window.location.href='#'"/></th>
<th><input class="knopf2" type="button" value="Microsoft Word" onclick="window.location.href='/site/wiki/Seiten/Word%20Tastenk%c3%bcrzel.aspx'"/></th>
<th><input class="knopf3" type="button" value="Microsoft Excel" onclick="window.location.href='/site/wiki/Seiten/Excel%20Tastaturk%c3%bcrzel.aspx'"/></th>
<th><input class="knopf4" type="button" value="Zugriffsberechtigungen" onclick="window.location.href='/site/wiki/Seiten/Benutzerantrag%20Rollen%c3%bcbersicht.aspx'"/></th>
</tr>
<tr>
<th><input class="knopf4" type="button" value="SharePoint" onclick="window.location.href='/site/wiki/Seiten/SharePoint.aspx'"/></th>
<th><input class="knopf3" type="button" value="SAP" onclick="window.location.href='/site/wiki/Seiten/SAP%20Schulungen.aspx'"/></th>
<th><input class="knopf2" type="button" value="Facilitymanagement" onclick="window.location.href='/site/wiki/Seiten/Hausmeister.aspx'"/></th>
<th><input class="knopf" type="button" value="Skype for Business" onclick="window.location.href='/site/wiki/Seiten/Skype%20for%20Business.aspx'"/></th>
</tr>
<tr>
<th><input class="knopf2" type="button" value="Drucken" onclick="window.location.href='#'"/></th>
<th><input class="knopf" type="button" value="Mobile Geräte" onclick="window.location.href='#'"/></th>
</tr>
<tr>
</tr>
</form>
</table>
</body>
</html>
如您所见，我使用 CSS 定义了按钮的样式。按钮的文本是用“Value="""制作的。我怎样才能在这个盒子里放一些很棒的字体图标？我真的不知道。我试图声明更多的类来输入，但没有成功。
最佳答案
欢迎来到 SO Troi。
您可以使用 :before 伪选择器通过 CSS 在您的按钮中显示图标以将图标添加到您的按钮，或者您可以将图标放在 HTML 中的按钮中，例如所以:
<button class="knopf2" onclick="window.location.href='/site/wiki/Seiten/Word%20Tastenk%c3%bcrzel.aspx'"><i class="fa fa-home"> Microsoft Word</button>
注意到我使用了现代的 button 元素而不是输入，因为如果您正在学习，这是一个很好的练习。
关于html - 是否可以使用类 AND Fontawesome 预定义输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58325525/
25
4
0
我对我接管的项目有疑问。我正在转换其他人编写的 MS Access 应用程序并将其转换为 MySQL/PHP Web 应用程序。其中大部分已经完成，但是，当涉及到此应用程序的调度部分时，我处于停滞状态
我有一个带有 @Scheduled 注释的方法。此方法包含长时间运行、昂贵的操作。我担心当计划的方法开始运行时应用程序会变慢。有什么办法可以为预定方法分配优先级吗？在 Spring 中启动低优先级后台
我的大学有一个预订项目房间的网站；但除非你很幸运或者半夜醒着，否则要订到房间并不容易。因此，我编写了一个 JS 片段来填写所有必要的字段并提交表单。 但是我如何自动化这个过程呢？ 我的目的基本上是加载
我正在评估处理大量排队消息的可能解决方案，这些消息必须在特定日期和时间交付给工作人员。执行它们的结果主要是对存储数据的更新，它们最初可能是也可能不是由用户操作触发的。 例如，想想你在一个假设的大型星际
@Scheduled documentation here声明 fixedRateString值可以是 the delay in milliseconds as a String value, e.g
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 4年前关闭。 Improve t
我有一个有趣的情况。我解析了几个新闻发布网站，想通过调度程序将它们保存到数据库中。但是保存时出现错误。由于交易后写条件 described here . 我的模型类是 @Entity @Table(n
我正在阅读 Java Concurrency in Practice 并遇到以下代码片段。 public static void timedRun(final Runnable r,
使用 Azure 数据工厂，是否可以对驻留在 Azure SQL 数据库中的多个(不是全部)表中的所有行执行预定的 1:1 复制/克隆到另一个 Azure SQL 数据库(在本例中为 Azure SQ
我是一名优秀的程序员,十分优秀！