So I have created some image hover effects for all to use. I am using bootstrap modals so you can click show code and the pop up will appear with the html and css you can simply copy and paste. However on some of the effects do not contain text and show font icons instead. For these examples I put the font icons inside the button and changed the style of the button. This works fine in chrome, you can click around the icons and the modal opens up. However in firefox it does not work at all is anyone able to help?
For example here is the code for effect 7. Works fine in chrome but not in firefox:
<button class="emptybutton" data-toggle="modal" data-target="#modal7">
<h2>Hover effect 7</h2>
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-dribbble"></i>
</p>
</button>
To view the live version go here: https://miketricking.github.io/
Thank you all in advance! :)
Ok so if anyone encounters the same issue you can actually use other elements to open a modal. All you have to do it give the data-toggle="modal" data-target="#modal7" attributes to a different element and it should work.
Here is my updated code:
<div class="overlay point" data-toggle="modal" data-target="#modal7">
<h2>Hover effect 7</h2>
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-dribbble"></i>
</p>
</div>
Related
I'm practicing making a simple modal login form using HTML and Bootstrap 4. I'm planning to put icons into my email and password field to make it looks interesting. However it looks like most of the method to do this are by using css to add the icons into input fields. I was wondering, can you add icons into input fields without using css?
You can add source into your head with icons and then use them with class.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
to make it looks like it's inside the input field, you need use some css. It can be inside your lines:
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<body>
<div id="yourDiv" style="border:1px solid black; width:200px">
<i class="fas fa-heart"></i>
<input style=border:0px>
</div>
</body>
I am having a problem with font-awesome icons. When you click on the little plus it is fine however if you click on the rest of the button it will not take you to the link.
<div class="jumbotron">
<p>
<button type="button" class="btn btn-default pull-right">
<i class="fa fa-plus" title="Edit"></i> </button>
</p>
http://jsfiddle.net/py7vA/217/
How would I fix this?
Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.
<i class="fa fa-plus"></i>
You can do a couple different things one is what Ibrahim mentioned or:
<div class="jumbotron">
<p>
<i class="fa fa-plus btn btn-default pull-right" title="Edit"></i>
</p>
</div>
I am having fun with FontAwesome and its stacking mechanism and wanted to create an icon for "non-photo-files" (...whatever that is. I just want to show that it can be done, no deeper purpose...)
see example # http://jsfiddle.net/mbaas/s00uh5ce/1/
I am constructing a stack combining one icon with a stack of two others (I think they need to be stacked separately because of the vertical adjustment...).
Basically I have blocks like this:
<span class=" fa-stack fa-4x" style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;">
<i class="fa fa-file-o fa-stack-1x fa-3x"></i>
<span style="top:1em;left:.25em" class="fa fa-stack-1x">
<i class="fa fa-camera fa-stack-1x"></i>
<i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
</span>
</span>
As you see in the fiddle, the indidual icons look great, but I'm struggling with the alignment of these in relation to the surrounding text. What I'd like to see is these icons sharing the same baseline with the text that follows them - but I would not want to apply anything to the text - it would be great if all adjustments could be done within the icons themselves...
You can apply vertical-align:bottom; to the parent span, so your first one would be:
<span class=" fa-stack fa-1x" style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em; vertical-align:bottom; ">
<i class="fa fa-file-o fa-stack-1x fa-3x"></i>
<span style="top:1em;left:.25em" class="fa fa-stack-1x">
<i class="fa fa-camera fa-stack-1x"></i>
<i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
</span>
</span>
blablabla
See a reference at Centering FontAwesome icons vertically and horizontally
i use fontawesome icons on my website. i would like to add a link to this icons.
for example : when someone clicks on the google icon the google page should open in a new window.
<div id="GooglePlus">
<i class="fa fa-google-plus"></i>
</div>
href="http://google.com" target="_blank"
how can i combine this two things ?
Try this:
<div id="GooglePlus">
<i class="fa fa-google-plus"></i>
</div>
this my code.how to show text message inside the square box with size 1x.
<span class="fa-stack fa-5x" style="margin-left:5%">
<i class="fa fa-square-o fa-stack-2x"></i>
</span>
put position absolute and put margin as per your requirement on the div tag you create in which you put the text.
<div style="position: absolute;">asdasdaddas</div>
Let the Font Awesome classes do the work. Wrap your text in the fa-stack-1x class and it will position and center it over the icon. You can play with the font size from there if needed.
<span class="fa-stack fa-5x fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<span class="fa fa-stack-1x">Aa</span>
</span>
http://jsbin.com/pisadulufo/1/edit?html,css,output