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
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 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 am newbie in Bootstrap & HTML.
In my HTML I have a container and a row with 3 columns inside. In my situation, the title of the last section is way longer than others and needs to be displayed in 2 lines.
Because of this, the text of this section is in lower position than it is in other sections.
My question: Is it possible to make all of these texts after headers to be vertically in the same position?
HTML Code example:
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted eqHeight"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted eqHeight"> TEXT_2</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_3</h4>
<div class="text-muted eqHeight"> TEXT_3</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_4</h4>
<div class="text-muted eqHeight"> TEXT_4</div>
</div>
</div>
</div>
This is how it looks like:
include jQuery and just write javascript for finding and setting the height of bigger one.
function max-height(){
var height=0;
var mHeight=0;
$('.service-heading').each(function(){
height = $(this).height();
if(height>mHeight)
mHeight = height;
});
$('.service-heading').height(mHeight);
height=0;
mHeight=0;
}
then call this function on ready() and resize()
$( document ).ready(function() {max-height();});
$( window ).resize(function() {max-height();});
in your code, text is aligned to center. i have removed it. check comment. then in the long text of title_title_title..so on, i have provided a space which encodes as newline character.
In the column setup, you have provided 'col-md-3' for three time, which makes it three-fourth of the width. so changed it to " col-md-3 , col-md-3 , col-md-6".
check out this.
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row "> // removed text-center
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted"> TEXT_2</div>
</div>
<div class="col-md-6"> // here col-md-3 changed to col-md-6
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE _TITLE_TITLE_TITLE_TITLE_ TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_3</h4> // here provided with a space.
<div class="text-muted"> TEXT_3</div>
</div>
</div>
</div>
Changed answer: Now that I get what you're asking here, I would recommend using eqHeight library (jQuery). It works like a charm with Bootstrap and what it does is that it automatically calculates the height of the tallest element and adjusts the height of others to same.
In this case you could do the following:
<div class="row">
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
</div>
The point is to make the eqHeight library point to the .eqHeight class and make it calculate the upper elements (in this case .service-heading classes) to be the same height.
This might require an additional CSS, but shouldn't be more than just height and max-height properties.
Vertical positioning is a slight problem with responsive design. Another solution for this would be of making an additional row below the existing one and setting the same cols in there, but that of course doesn't work when the site breaks up for mobile.
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.