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
I had a problem where my tooltips where not showing on top of my datatable.
I solved this by adding data-container='body' as an attribute (as described here) which now shows the full tooltip but creates a new problem; it removes the context of the tooltip.
As example:
<div class="text-info tooltip-info"
data-rel="tooltip"
data-html="true"
data-original-title="
<div class="text-left">
<i><b>Commercial decision:</b> <br> </i> <br>
<i><b>Technical decision:</b> <br> </i> <br>
<i><b>Overall decision:</b> <br> </i>
</div>"
style="font-weight: bold;overflow: auto;">
Pending
</div>
yields:
which is not shown on top of the datatable but does have the correct context.
Adding data-container='body' yields:
which display correctly but doesn't show any context.
How do i display the tooltip correctly while retaining the context i want?
I hope this will fix your issue. if not then I would like to ask your code too. it's easy to inspect then.
$('[data-toggle="tooltip"]').tooltip();
.parent-container {
width: fit-content;
position: relative;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="parent-container"><div class="" data-toggle="tooltip" data-placement="right" data-container=".parent-container" data-html="true" title="
<div class="text-left">
<i><b>Commercial decision:</b> <br> </i> <br>
<i><b>Technical decision:</b> <br> </i> <br>
<i><b>Overall decision:</b> <br> </i>
</div>"
style="font-weight: bold;overflow: auto;">
Pendings
</div></div>
Here is my page screenshot http://s30.postimg.org/44jynnz35/Untitled_2.png
html:
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
I have been created social links with social icons, I took source code from this link https://github.com/miohtama/FontAwesome-and-Bootstrap-social-icons-example/
I need one more link and icon, that is mailbox.
So i added code like this,
<a href="http://opensourcehacker.com/">
<i class="icon icon-gmail"></i>
<span>Email</span>
</a>
But i m not sure for mail box icon code,
I have 3 files,
1. <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
2. <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />
3. <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
So may i know, exact code for mailbox icon or where can i take?
Any help would be highly appreciated.
Thanks in advance.
It's icon-envelope
<i class="icon icon-envelope"></i><span>Email</span>
Since you are using older version of fontawesome, some icons may be missing from the file. Try using this updated library : http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css instead of older one.
Here's my url http://bloomh.com/
If you look down in the "testimonial" section you'll see a bunch of weird characters being displayed. Strange thing is that it seems to "grow" over time and the code is inside my html. Obviously I did not add this to my original html.
How and why is this happening. Very strange. Any help and direction would be greatly appreciated.
Ok here's the html and php. The weird characters are inside the html however I did not add that at all. Also another small caveat is I used the frontend creator Webflow.com and then exported the html and transferred over to my hosting. Webflow is pretty legit and I've already spoken with them and they've assured me that their code is clean. Once again this happened after I published the page and used the php form a couple of times then those weird characters started to "grow" over time.
HTML
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Tue Aug 19 2014 18:12:20 GMT+0000 (UTC) -->
<html data-wf-site="5359ea800548c9ed4700023a" data-wf-page="53dbf829e673629c186afc3f">
<head>
<meta charset="utf-8">
<title>Bloomh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webflow">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/bloomhmvp.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Carme:regular","Roboto Slab:300,regular,700","Nixie One:regular","Pontano Sans:regular","Quicksand:300,regular,700","Muli:300,300italic,regular,italic","Raleway:300,regular,500,600,700,800,900","Arimo:regular,italic,700,700italic","Oxygen:300,regular,700","Cabin:regular,italic,500,500italic,600,600italic,700,700italic","Roboto:300,300italic,regular,italic,500,500italic,700,700italic,900,900italic"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/fontawesome-webfont.svg">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="w-nav navbar vl" data-collapse="medium" data-animation="default" data-duration="400">
<div class="w-clearfix navbar-section">
<div class="logo-container vl">
<a class="w-nav-brand logo vl" href="#"></a><a class="brand vl" href="#">Bloomh</a>
</div>
</div>
</div>
<div class="hero-background home2 vl">
<div class="w-container hero-container">
<div class="coming-soon">COMING SOON!</div>
<div class="centering-container _95">
<h1 class="hero-tagline home2 vendor-landing vl">Brides set the price<br>Vendors come to them</h1>
</div>
<div class="centering-container _85 tablet">
<h2 class="secondary-tagline home2 vendor-landing vl">A new way to hire photographers & videographers</h2>
</div>
<div class="vendor-question-box">
<div class="w-row">
<div class="w-col w-col-4">
<div class="w-form">
<form id="wf-form-vl2-signup" action="php/vl2_submit.php" method="post" name="wf-form-vl2-signup" data-name="vl2 signup" data-redirect="http://www.bloomh.com">
<div class="centering-container">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-email" type="email" placeholder="Valid Email" name="vl2_email" data-name="vl2 email" required="required">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-address" type="text" placeholder="Website address?" name="vl2_address" data-name="vl2 address" required="required">
<input class="w-button button join-button vendor-join vl" type="submit" value="Vendor Join!" data-wait="Joining..." wait="Joining...">
</div>
</form>
<div class="w-form-done">
<p>Thank you! Your submission has been received!</p>
</div>
<div class="w-form-fail">
<p>Oops! Something went wrong while submitting the form :(</p>
</div>
</div>
</div>
<div class="w-col w-col-8">
<div class="centering-container _85 vl">
<div class="vendor-question vl">Are you a Photographer or Videographer?</div>
<div class="w-hidden-main w-hidden-medium w-hidden-small how-to-wrap vl">
<div class="centering-container vendor-sale mobile">
<div class="vendor-sale-text vl">Sign Up</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down vendor-welcome vl"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl get-clients">Get clients via email</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down mobile"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl">Free and Easy!</div>
</div>
</div>
<div class="w-hidden-tiny vendor-question-subtext phone">
<div class="vendor-how-to vendor-landing vl">Sign Up</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Get clients in your inbox</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Free and Easy!</div>
</div>
<div class="more-categories vendor-landing vl">Birthdays / Portraits / Parties / Bat Mitzvahs / Engagements</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vl-testimonials">
<div class="centering-container vl testimonials">
<div class="testimonial vl">Testimonials</div>
<div class="testimonial-text vl">“I use Bloomh to get most of my new wedding clients. It plays a big part in growing my business.â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Lance Capshaw, Huntington Beach CA
<br>(Vendor)</div>
<div class="testimonial-text vl">“I can't believe this service is free! I use it to get my wedding clients. They just come into my inbox!â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Trish Carpenter, Hermosa Beach, CA
<br>(Vendor)</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>
**** PHP ****
<?php
$email = htmlspecialchars($_POST['vl2_email']);
$website_address = htmlspecialchars($_POST['vl2_address']);
mail("bpark#bloomh.com", "New Vendor vl2", "From: $email", "Website Address: $website_address");
header("Location:../vl2-confirm.html");
?>
1) Search the whole code with the class name "testimonial-text" and see the code, try to replace the content after typing from notepad.
2) add a <p>Your content content</p> for your paragraphs.
3) you can paste the server side code for us.
4) You need to tell to MySQL that the connection must be made in UTF-8.
This has me stumped...
SEE JSBIN HERE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.slide-nav:nth-of-type(1) { color:red } /* this should select the number 1 */
</style>
</head>
<body>
<div class="image">
<span class="slide" data-order="4" rel="content-images/teta.jpg" ></span>
<span class="slide" data-order="3" rel="content-images/champ.jpg" ></span>
<span class="slide" data-order="2" rel="content-images/clouds.jpg" ></span>
<img class="slide initial" data-order="1" src="content-images/air.jpg" />
<span class="spinner"></span>
<!--
delete this line to comment the two arrow links -->
<a class="arrow next" href="javascript:void(0)">→</a>
<a class="arrow prev" href="javascript:void(0)">←</a>
<!-- -->
<a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
<a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
<a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
<a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
</div>
</body>
</html>
Question
Why does the .slide-nav:nth-of-type(1) { color:red } only work when the two additional links above the numbers are removed?
In the jsbin, delete the two arrows, or delete the commented line to comment that block and you'll see that the .slide-nav:nth-of-type(1) selector works magically.
For the life of me, it appears that it should just work regardless. What am I missing here?
There is no filter by class in CSS because it does not have a :nth-of-class() selector. :nth-of-type filter has to be on a tag.
A workaround is to wrap your slide-nav links inside a span and filter for all as inside in CSS.
<span class="numbers">
<a class="slide-nav on" href="javascript:void(0)" rel="1">1</a>
<a class="slide-nav" href="javascript:void(0)" rel="2">2</a>
<a class="slide-nav" href="javascript:void(0)" rel="3">3</a>
<a class="slide-nav" href="javascript:void(0)" rel="4">4</a>
</span>
And the CSS
span.numbers a:nth-of-type(1) { color:red; } /* this should select the number 1 */
For an example see http://jsfiddle.net/3J4K6/