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>
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 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>
Building on this post... Font over font awesome icon
Fiddle
<span class="fa-stack fa-3x">
<i class="fa fa-trophy fa-stack-2x"></i>
<span class="fa fa-stack-1x" style="color:red;">
<span style="font-size:35px; margin-top:-20px; display:block;">
#1
</span>
</span>
I want the "1" inside the trophy to look like this...❶ ... its a "1" inside a black circle, similar like a numbered billiard ball and I want to be able to CSS style it, color, size, border, etc. Is that possible to achieve? This ❶ is a symbol I copied from Word.
HTML:
<span class="fa-stack fa-3x">
<i class="fa fa-trophy fa-stack-2x"></i>
<span class="fa fa-stack-1x" style="color:red;">
<span>
#1
</span>
</span>
</span>
CSS:
.fa-trophy ~ .fa{font-size:35px;margin-top:13px;display:block;position:relative}
.fa-trophy ~ .fa span{background:#fff;color:red;border-radius:50%;width:24px;height:24px;text-align:center;font-size:20px;line-height:20px;display:block;padding:4px;position:absolute;top:16%;left:0;right:0;margin:auto}
Let me know if that's along the lines of what you had in mind.
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