Hi I have some code for a icon bar below:
<body onload=startTime()>
<div id=txt></div>
<meta content="width=device-width,initial-scale=1"name=viewport>
<link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
<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 .3s ease;color:#fff;font-size:36px}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}</style>
<body>
<div class=icon-bar>
</i>
</i>
</i>
</i>
</i>
</div>
It looks like this:
I want some text below the icons to show my visitors what the icon means. I tried doing some text after the fa fa-***** but it keeps some text on the side. I went onto w3schools but they didn't have any text examples. I'm not sure if this is possible because this is a icon bar, not a text bar but maybe there is a way. If you know a way can you please reply.
Thanks!
try this :
<body onload="startTime()">
<div id="txt"></div>
<meta content="width=device-width,initial-scale=1" name="viewport" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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 .3s ease;color:#fff;font-size:36px}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}</style>
<div class="icon-bar">
<a href="Subpages/PC/pc.html">
<i class="fa fa-desktop"><p style="font-size:20px;">text1</p></i>
</a>
<a href="Subpages/Laptops/laptops.html">
<i class="fa fa-laptop"><p style="font-size:20px;">text2</p></i>
</a>
<a href="Subpages/Software/software.html">
<i class="fa fa-windows"><p style="font-size:20px;">text3</p></i>
</a>
<a href="Subpages/CoolStuff/coolstuff.html">
<i class="fa fa-smile-o"><p style="font-size:20px;">text4</p></i>
</a>
<a href="Subpages/About/About.html">
<i class="fa fa-question-circle-o"><p style="font-size:20px;">text5</p></i>
</a>
</div>
</body>
You can use span tag to add text
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 .3s ease;color:#fff;font-size:36px; text-decoration: none; font-size: 16px;}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}
.icon-bar a span {
display: block;
margin-top: 5px;
}
<body onload=startTime()>
<div id=txt></div>
<meta content="width=device-width,initial-scale=1"name=viewport>
<link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
<div class=icon-bar>
</i><span>link</span>
</i><span>link</span>
</i><span>link</span>
</i><span>link</span>
</i><span>link</span>
</div>
working fiddle here
Related
I have the following snippet of code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-stack-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
</body>
</html>
This is from a larger project (simplified the code), and I need to have the style="width:auto" on the parent span class.
Without removing the style="width:auto", I am trying to achieve three things:
center the "1" in the box
make the 1 on the same line as "This is a sentence"
make the "This is a sentence appear next to the box instead of overlapping inside it.
This would look similar to the image here, except that the 1 isn't on the same line as "This is a sentence" - would anyone know how to achieve this?
Replace class fa-stack-2x with fa-2x in span.fa
fa-stack-2x class has position:absolute so that text is overlay it
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<li>
<span class="fa-stack" style="width: auto;">
<!-- The icon that will wrap the number -->
<span class="fa fa-square-o fa-2x"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">1</strong>
</span>
This is a sentence.
</li>
</ul>
Or You can do this without using font-awesome
.square {
display: inline-block;
border: 2px solid #000;
border-radius: 5px;
text-align: center;
width: 20px;
height: 20px;
font-weight: bold;
line-height: 20px;
}
<ul>
<li>
<span class="square">1</span>
This is a sentence.
</li>
</ul>
I would like to create a space between my fa icons and text but fa-fw isn't working and neither is.i {margin-left: 10px;}
Html:
<div class="logos1"><i class="fa fa-search">logos</i></div>
HTML
<div class="logos1">
<i class="fa fa-search">
<span class="padding">logos</span>
</i></div>
CSS
.padding{
padding-left:10px;
}
You are writing text between the i tag. This is not a good practice. You can achieve your goal using below code.
i{
margin-right: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/>
<div class="logos1"><i class="fa fa-search"></i>logos</div>
I am relatively new to Front-end development and am trying to make a webpage. I am using Materialize.css as my framework. Problems I am facing:
I have placed four custom logos on top of each other to crossfade them. However, the menu that is supposed to appear below them is placed from the beginning of the webpage. I can use margin-top on the menu, but, I want to know an alternate solution that automatically places the menu (id="menu1") just after the images. Please see the images to see what I'm trying to achieve.
Current layout:
What I am trying to achieve:
Also, is there a wrapper class for side-navigation bar in materialize.css
The one I'm using is without any wrapper class (id="menu1") and the second one is hidden and has to be shown using jquery (id="mobnav"). I want a side navigation bar that is always shown. Any help will be greatly appreciated.
The font icons and the text are not vertically aligned. Meaning the home icon and the text "Home" are at different heights. Same goes for all the menu items. How best to address this?
Lastly, I want to center my menu (id="menu1") to the center of the class="col s4 m4 l2". For this, I change the height of the div to 100vh and use the class "valign-center" on the menu (id="menu1"). But, it is not working. Why won't it work?
Am I missing anything?
Jquery code (js.script):
$(window).on("load", function(e) {
$(".pre-loader").fadeOut("slow");
});
$(function() {
$(".button-collapse").sideNav();
});
CSS code(style.css):
.logo img {
position: absolute;
}
.nav1 li {
background-color: yellow;
margin-top: 10px;
padding: 5px;
border-radius: 5px;
}
.flarge {
font-size: 36px !important;
}
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<link rel="stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<div class="pre-loader"></div>
<section id="home" class="page-section">
<div class="row">
<div class="col s4 m4 l2" style="background-color: teal;">
<div style="position: relative;" class="logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
<img class="responsive-img" src="https://ibb.co/jVy6Yw" alt="Logo">
</div>
<div id="menu1" class="hide-on-med-and-down">
<ul class="nav1">
<li><i class="material-icons flarge valign" aria-hidden="true">home</i> Home</li>
<li><i class="material-icons flarge" aria-hidden="true">help</i> About</li>
<li><i class="material-icons flarge" aria-hidden="true">event</i> Events</li>
<li><i class="material-icons flarge" aria-hidden="true">people</i> Our Team</li>
<li><i class="material-icons flarge" aria-hidden="true">account_box</i> Contacts</li>
</ul>
</div>
<nav style="background-color: transparent; box-shadow: 0px 0px 0px 0px;">
<i class="material-icons flarge">menu</i>
<ul class="side-nav" id="mobnav">
<li><i class="material-icons flarge" aria-hidden="true">home</i> Home</li>
<li><i class="material-icons flarge" aria-hidden="true">help</i> About</li>
<li><i class="material-icons flarge" aria-hidden="true">event</i> Events</li>
<li><i class="material-icons flarge" aria-hidden="true">people</i> Our Team</li>
<li><i class="material-icons flarge" aria-hidden="true">account_box</i> Contacts</li>
</ul>
</nav>
</div>
</div>
</section> <!--end of home -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
<!-- end snippet -->
try to add a class divider underneath it asw shown on the website of materialize.css , i think it might be able to create a large enough spacer underneath the "logo" for your goal that your trying to achieve here. :)
I just wants to display a font awesome icon and text in a line:
<th>
<span>
<a>
<i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</span>
<span> Add Task</span>
</th>
It's working but the problem is =>
If you take a look at above pic then you can see the text is not on the middle of the icon. I tried to put some margin there but it's not working. Can anybody help me?
Target the element containing the font-awesome icon. Set position as relative and adjust top value;
a {
text-decoration: none;
font-family: Arial;
color: #333;
}
/*Example 1*/
i {
color: green;
vertical-align: sub;
font-size: 50px;
}
i::before {
font-size: 30px;
}
/*Example 2*/
span {
color: green;
font-size: 50px;
position: relative;
top: 4px;
}
span::before {
font-size: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--Example 1-->
<a href="#">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Add Task
</a>
<br>
<!--Example 2-->
<a href="#">
<span class="fa fa-plus-circle" aria-hidden="true"></span> Add Project
</a>
Example Code Pen: https://codepen.io/Omi236/pen/KqbQoO?editors=1100
In your case, you just need to use font size property at parent level.
Working example
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<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">
</head>
<body>
<a style="font-size:16px;"><i class="fa fa-plus-circle"style="color:green;"></i><b> Add New</b></a>
</body>
</html>
I have added html code inside php, which works fine. Just issue is, font awsome symbol does not appear(display square box), which I used successfully before.
<link href="font-awesome.min.css" rel="stylesheet">
<link href="bootstrap.css" rel="stylesheet">
echo '<div class="c1">
<div class="item2">
<div class="image2">
<img class="media-object" src='.$row1[image].'>
</div>
<div class="descriptionContainer2">
<span class="main-head">Italian - '.$row1[rate].' <span class="fa fa-star"> </span> </span>
<span class="min-head"> '.$review.'</span>
<span class="subcont">
<span class="fa fa-phone"> '.$row1[phone].'</span>
<span class="fa fa-home">'.$row1[address].'</span>
</span>
</div>
</div>
</div>';
When I used same code in fiddle it displays correctly:
CHECK FIDDLE - http://jsfiddle.net/karimkhan/9r74Y/4/
Use the CDN:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
if they display with that in place then you know you have a path issue.
Cheers,
Ant.