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">
<i class="fa fa-user"></i>
<i class="fa fa-mortar-board"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-download"></i>
</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">
<i class="fa fa-user"></i>
<i class="fa fa-mortar-board"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-download"></i>
</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>
Try this,
.icon-bar{
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.icon-bar a {
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
This will affect all the a tags of .icon-bar class.
Also here's some documentation on how display flex works, https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I'm trying to use icons inside my lateral menu but when i put the icon, the font-family changes.
like this
theres a way to put an icon inside the bar, without changes the whole font-family?
<!--Programmed by: João Lucas-->
<!--started in: 20220713 05:00am -->
<!--Last edit: 20220713 07:22am-->
<!--version: 1.0-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<script src="https://kit.fontawesome.com/d24d1f29c0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="hpstyle.css">
</head>
<body>
<ul id="sidebar">
<div id="imgsidebar">
<img src="logo_main.png" id="logosidebar">
</div>
<li><a class="fa fa-home" href="/index.html"> Inicio</a></li>
<li> Configuracoes</li>
<li> Clientes</li>
<li> Fornecedores</li>
<li> Produtos</li>
<li> Estoque</li>
<li> Eventos</li>
<li> Relatórios Gerais</li>
<li> Nota Fiscal</li>
<li> Produção</li>
<li> Compras</li>
<li> Delivery/Encomendas</li>
<li> Vendas</li>
<li> Financeiro</li>
<li> Downloads</li>
</ul>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
color: #000;
font-size: 14px;
background-color: #111;
font-family: roboto;
}
#sidebar {
width: 200px;
margin: 10px; padding: 0;
background: #222;
list-style-type: none;
border-radius: 4px;
height:900px;
}
#imgsidebar{
display: flex;
justify-content: center;
padding: 12px;
}
#sidebar a {
color: #666;
text-decoration: none;
padding: 10px;
display: block;
}
/* animação quando passa o mouse */
#sidebar a:hover {
background: #302f2f;
color: rgb(255, 255, 255);
}
Is there any way (example of code), that I can use so as to inherit the same font-family which is used in the webiste, after using a font awesome icon?
Thank you so much for your time.
The icon should be in a separate <i> tag, e.g:
<i class="fa fa-home fa-fw" aria-hidden="true"></i>Inicio
You're using your classes inside the <a> tag too:
<li><a class="fa fa-home" href="/index.html"> Inicio</a></li>
Think of font-awesome as a separate entity. Check the docs for more info.
Here's a snippet:
<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<i class="fa fa-home fa-fw" aria-hidden="true"></i> Inicio</a>
I have written the following HTML code :
My main focus is to align the list items - HOME | All About Kittens | Feeding Your Kitten
properly. It's currently appearing as a simple list. I want to make it like :
Here the list items are Home, Shop and collections and they are aligned horizontally
Plus when you hover over an item it changes in color and a line appears below it
Any ideas how should I go about implementing this way
a {
color: black;
text-decoration: none;
}
.promo_banner {
background-color: #333;
text-align: center;
color: #fff;
font-size: 12px;
position: relative;
width: 100%;
z-index: 5000;
top: 0;
overflow: hidden;
}
div.logo img {
max-width: 205px;
width: 100%;
margin: 0 auto;
display: block;
max-width: 100%;
height: auto;
}
<html>
<head>
<link rel="stylesheet" href="home.css" />
</head>
<div class="promo_banner">
<div class="promo_banner__content">
<p>
<strong>Our Guide on Caring for Your Furry Feline Friend</strong>
</p>
</div>
<div class="promo_banner-close"></div>
</div>
<div class="top_bar clearfix">
<ul class="social_icons">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<div class="container">
<span><i class="fab fa-twitter"></i><a href="https://www.twitter.com"></span>
<span><i class="fab fa-facebook-f"></i></span>
<span><i class="fab fa-youtube"></i></span>
<span><i class="fab fa-instagram"></i></span>
</div>
</ul>
</div>
<div class="logo text-align--center">
<a href="https://store.linefriends.com" title="LINE FRIENDS INC">
<img
src="logo.jpeg"
class="primary_logo lazyloaded"
alt="LINE FRIENDS INC"
/></a>
</div>
<div class="nav">
<ul class="menu center">
<li >
<span>HOME</span>
</li>
<li >
<span>All About Kittens</span>
</li>
<li >
<span>Feeding Your Kitten</span>
</li>
</ul>
</ul>
</div>
</html>
This is the logo.jpeg I am using in the HTML.
I wanted to make it like How the image line items appears in middle
You can use display: flex; to show navigation like the UI you mentioned.
Here's the demo: https://codepen.io/shubhamp-developer/pen/gOmmxOg
.nav .menu{
display: flex;
list-style: none;
}
Preview:
To learn more about display flex, I would prefer to follow this super helpful link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Basically these two properties will fix this.
display: flex;
justify-content: center;
Add these classes and remove background color from .nav .menu
.nav .menu{
display: flex;
gap: 1rem;
list-style: none;
}
.nav{
display: flex;
justify-content: center;
}
.nav_wrapper {
background: #f1f1f1;
}
Also wrap your <div class="nav"></div> in another div.nav_wrapper
<div class="nav_wrapper">
<div class="nav">
</div>
</div>
where can I get the original Font Awesome fa fa icon image link, I use web Developers Tools [Ctrl+Shift+C] and I don't see any link when I click fa fa icons.
example: fontawesome.com/image/fafa/user-circle-o.png
You can try in this way :
Call Font Awesome in Your Files
Place this code, which contains everything you need, within the of each template or page that you want to use Font Awesome on.
Ex. -
ul li {
list-style-type: none;
display: inline-block;
width: 30px;
height: 30px;
background-color: #fff;
text-align: center;
border-radius: 100%;
margin: 0 11px;
}
i {
padding-top: 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<ul>
<li><i class="fa fa-download"></i>
</li>
<li><i class="fa fa-upload"></i>
</li>
<li><i class="fa fa-trash"></i>
</li>
</ul>
Can someone help me understand how can I vertical align this?
JSFIDDLE
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css"
></link>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>
I need align icon and text next to it?
there is some more css since I'm using bulma.io and something custom but not so relevant I think
You can delete that css and create new one if it is not ok
There's a few options at your disposal, depending on your needs.
Updated jsFiddle
Use display: inline-block; on the element(s) that are next to each other and need to be aligned. Then you can use vertical-align: [top|middle|baseline] as needed for each element
i, span {
display: inline-block;
vertical-align: middle;
}
If that alignment doesn't work for you, then you should set the vertical-align to top, to get them positioned how you like, and then you can use line-height to fine-tune the vertical positioning of each element. Example:
i, span {
display: inline-block;
vertical-align: top;
}
i {
line-height: 39px;
}
span {
line-height: 39px;
}
You can add display: flex and align-items: center rules to li a
fiddle
aside {
background-color: #0067ad;
height: 100%;
}
li a {
display: flex;
align-items: center;
}
.menu-list {
list-style: none;
}
i {
color: white;
}
a:hover,
a:active,
.router-link-active {
background-color: black;
}
span {
color: white;
}
}
a {
color: white
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css" rel="stylesheet"/>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>
Why is the icon being not positioned under the email address and phone number fields? I know I could probably solve this by placing them in a div but there must be a simple reason for this. Could you explain what is happening and show me how to fix it. Thanks
footer {
width: 100%;
background-color: black;
color: #fff;
}
#foot-address {
list-style-type: none;
display: inline-block;
margin: 2em 2em;
}
#foot-contact {
list-style-type: none;
display: inline-block;
vertical-align: top;
margin: 0 0 0 2em;
}
#facebook-icon {
color: #fff;
display: inline-block;
}
<html>
<head>
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
</head>
<footer>
<ul id="foot-address">
<li>12 The Cross</li>
<li>Bramhope</li>
<li>Leeds</li>
<li>LS16 9AX</li>
</ul>
<ul id="foot-contact">
<li>popsiesfishandchips#yahoo.co.uk</li>
<li>0113 2842178</li>
</ul>
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
<hr>
</footer>
https://jsfiddle.net/dsohk0nz/
I created the fiddle below. Please check and tell me if its not exactly what you want.
<ul id="foot-contact">
<li>popsiesfishandchips#yahoo.co.uk</li>
<li>0113 2842178</li>
<li><i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i> </li>
</ul>
https://jsfiddle.net/dsohk0nz/1/
For a quick fix (without regard to the rest of the layout), change the last CSS rule to this:
#facebook-icon {
color: #fff;
display: block;
width: 30px;
margin: 0 auto;
}
https://jsfiddle.net/a5wL2vz7/1/
Or do you mean something like this: https://jsfiddle.net/11bn4m0o/1/
Here I moved the a tag with the icon into the ul tag that contains the mail address.
In #facebook-icon you have used inline-block.Replace it with block.
Like this:
#facebook-icon{
color: #fff;
display:block;
}
Just put the link inside a <li> in your <ul id="foot-contact"> and facebook icon will appear bellow your email and phone number.
<footer>
<ul id="foot-address">
<li>12 The Cross</li>
<li>Bramhope</li>
<li>Leeds</li>
<li>LS16 9AX</li>
</ul>
<ul id="foot-contact">
<li>popsiesfishandchips#yahoo.co.uk</li>
<li>0113 2842178</li>
<li>
<a href="#" id="facebook-icon">
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
</a>
</li>
</ul>
</footer>