html和css中的图标栏自定义 [英] icon bar customisation in html and css
问题描述
我正在尝试自定义以下图标栏（如w3schools所示） - 下面粘贴的代码和链接，显示如图所示。图标需要在它们下面有文本（标签）。这不是微不足道的，因为您将看到是否继续阅读问题的描述。
此外，我想在这些图标上添加悬停文字，如图所示。
任何解决方案/建议表示赞赏。
对大多数人的任何想法有效地做这将是一个很大的帮助！
这是为w3学校代码
我改变了方式写图标和文本。
不能在所有屏幕尺寸中看图标栏，无论是放下拉按钮还是垂直显示，我都写过这个用于垂直显示，。我没有改变填充。因为我不太了解你想要什么
如果你想要自助，我可以帮助你使用bootstrap我觉得这对你来说很容易。
<！DOCTYPE html>
< html>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/font-
awesome / 4.7.0 / css / font-awesome.min.css >
< style>
body {margin：0;}
.icon-bar {
width：100％;
background-color：＃555;
溢出：auto;
}
.icon-bar a {
float：left;
宽度：20％;
text-align：center;
填充：12px 0;
过渡：全部0.3秒轻松;
颜色：白色;
字体大小：36px;
}
.icon-bar a：悬停{
background-color：＃000;
}
.icon-bar a {
text-decoration：none;
}
.active {
background-color：＃4CAF50！important;
}
@media only screen and（max-width：700px）{
.icon-bar a {
width：100％！important;
}
}
< / style>
< body>
< div class =icon-bar>
< a class =activehref =＃>
< ul style =list-style：none>
< li>< i class =fa fa-home>< / i>< / li>
< li> home< / li>
< / ul>
< / a>
< a href =＃>
< ul style =list-style：noneclass =menu_ul>
< li>< i class =fa fa-search>< / i>< / li>
< li> search< / li>
< / ul>
< / a>
< a href =＃>
< ul style =list-style：noneclass =menu_ul>
< li>< i class =fa fa-envelope>< / i>< / li>
< li> mail< / li>
< / ul>
< / a>
< a href =＃>
< ul style =list-style：noneclass =menu_ul>
< li>< i class =fa fa-globe>< / i>< / li>
< li> web< / li>
< / ul>
< / a>
< a href =＃>
< ul style =list-style：noneclass =menu_ul>
< li>< i class =fa fa-trash>< / i>< / li>
< li> delete< / li>
< / ul>< / a>
< / div>
< / body>
I am trying to customise the following icon bar (as shown in w3schools) - code pasted below along with link, to display like the image shown. The icons need to have text right underneath them (labels). This is NOT trivial as you'll see if you continue to read the description of the problem. Furthermore, I'd like to add hover-over text to these icons, as shown.
Any solutions/suggestions appreciated.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_h
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #666;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #44444 !important;
}
</style>
<body>
<div class="icon-bar">
<a href="signup.php"><i class="fa fa-user"></i></a>
<a href="challenges.php"><i class="fa fa-mortar-board"></i></a>
<a href="login.php"><i class="fa fa-eye"></i></a>
<a href="series.php"><i class="fa fa-download"></i></a>
</div>
</body>
</html>
In the image shown, the icon bar is placed over a green background image. I would like the text to appear directly underneath, and for there also to be hover-over text to appear.
I have tried the below, but it is incredibly difficult to get the layout correct. Is there a better way?
<div class="icon-bar">
<a href="signup.php"><i class="fa fa-user"></i></a>
<a href="challenges.php"><i class="fa fa-mortar-board"></i></a>
<a href="login.php"><i class="fa fa-eye"></i></a>
<a href="series.php"><i class="fa fa-download"></i></a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<p><font color="white">Topic1 Topic2 Topic3 Topic4</font></p>
<br>
<br>
<br>
<br>
Furthermore, a design flaw with adding text that way is on mobile sites the formatting will be entirely lost. see image below.
Any ideas to most effectively do this would be a great help!
this is for the w3 school code I just changed the way of writing the icon and the text .
its not possible to look the iconbar same way in all screen size either put dropdown button or vertical display ,I have written that for vertical display ,. I havent changed padding . Since i dont know much what you want
I can help you with bootstrap if you want in bootstrap i think that will be easy for you .
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.icon-bar a{
text-decoration:none;
}
.active {
background-color: #4CAF50 !important;
}
@media only screen and (max-width: 700px) {
.icon-bar a {
width:100% !important;
}
}
</style>
<body>
<div class="icon-bar">
<a class="active" href="#">
<ul style="list-style:none">
<li><i class="fa fa-home"></i></li>
<li>home</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-search"></i></li>
<li>search</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-envelope"></i></li>
<li>mail</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-globe"></i></li>
<li>web</li>
</ul>
</a>
<a href="#">
<ul style="list-style:none" class="menu_ul">
<li><i class="fa fa-trash"></i></li>
<li>delete</li>
</ul></a>
</div>
</body>
这篇关于html和css中的图标栏自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
