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>
Related
I have a Vue Component:
<template>
<span>
<i class="fas fa-file-pdf icon_styling"
v-bind:style="`color: ` + fileStatusColor()" ></i>
<i class="fas fa-paperclip icon_addition_styling"
v-if={{showIcon}}></i>
{{ mytext }}
</span>
</template>
I want to display the paperclip over the other icon.
Unfortunately, the solution at How to overlay one div over another div doesn't work as position:absolute orients itself on the whole page instead of orienting within my vue component.
My second idea was using negative margins on the icon, but that will also move the text.
Is there a way to get the icon to overlay within my vue component with html5/css?
FontAwesome actually supports stacked icons.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<span class="fa-stack fa-2x">
<i class="fas fa-file fa-stack-2x icon_styling" style="color: crimson;"></i>
<i class="fas fa-paperclip fa-stack-1x icon_addition_styling" style="color: white;"></i>
</span>
I am using Bootstrap 4 CSS and JS (from the official CDN), along with Font Awesome 5 (also official CDN).
I was originally using the text-center class from Bootstrap, since FA5 icons are just text. Then I tried using text-justify to make the icons dispersed better on larger-width displays, but this didn't work at all.
Here is the table cell part of the markup. I didn't want to paste the whole thing here because the templating (Jinja2) is fairly long.
<td>
<div class="container-fluid d-flex justify-content-between">
<i class="fas fa-fw fa-chevron-up"></i>
<i class="fas fa-fw fa-chevron-down"></i>
<i class="fas fa-fw fa-star"></i>
</div>
</td>
Table cell displays as expected except it is not full height and the icons look off-center.
Does anyone have a fairly simple way to make the d-flex element use the full height of the parent cell? Or just a better way in general to make up-vote, down-vote, and favorite icons fit well within a table cell? I also need to figure out a way to make the current scores / favorites number align well with all of the other cells in the table. Any existing solutions or advice you have would be very helpful as well.
Edit: As an afterthought, I should add that these icons will eventually be inside of buttons if that makes a difference.
Thanks.
Use align-items-center bootstrap class to align your elements center of the cell. If you used any custom line-height, Kindly remove it.
<td>
<div class="container-fluid d-flex justify-content-between align-items-center">
<i class="fas fa-fw fa-chevron-up"></i>
<i class="fas fa-fw fa-chevron-down"></i>
<i class="fas fa-fw fa-star"></i>
</div>
</td>
Note: The question was not clear to me. I gave the solution to align your fa icons vertically center to the cells. Hope u asking the same...
You say the icons will eventually be inside of buttons. Why not use a button group? Or use bootstraps col classes to align things. Set the height of the button 100% to take up the full height of the cell.
Both ideas shown below.
I hope this helps
td{
height: 100px;
}
.btn, .btn-group{
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>
<div>
<span class="col-sm-4">
<i class="fas fa-fw fa-chevron-up"></i>
</span>
<span class="col-sm-4">
<i class="fas fa-fw fa-chevron-down"></i>
</span>
<span class="col-sm-4">
<i class="fas fa-fw fa-star"></i>
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light">
<i class="fas fa-fw fa-chevron-up"></i>
</button>
<button type="button" class="btn btn-light">
<i class="fas fa-fw fa-chevron-down"></i>
</button>
<button type="button" class="btn btn-light">
<i class="fas fa-fw fa-star"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Why using .container-fluid with .d-flex? Use another parent tag for container-fluid class.
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
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>
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>