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.
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've got a collection of points that I'm displaying, I'm floating them all left, but if the text is too much in the one above it forces there to be a space appear. Can't figure out what's causing this, does anyone have any ideas?
HTML:
<div class="all-the-screen checkmark-move">
<div class="contain-inner">
<div class="checkmark-outer">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
<div class="clearfix"></div>
<div class="read-more-show noselect">Show More</div>
</div>
</div>
</div>
CSS:
.checkmark-outer {
width:92%;
margin-left:4%;
margin-right:4%;
}
.checkmark-move {
margin-top:18px;
}
.checkmark-inner {
overflow: hidden;
font-family: 'Source Sans Pro Regular';
line-height:24px;
vertical-align: middle;
padding-left:4px;
padding-right:20px;
padding-top:4px;
}
.checkmark-33 {
width:33.33%;
float:left;
margin-bottom:6px;
}
.checkmark-icon {
float:left;
}
.icon-background {
color: #8d1e22;
}
.icon-text {
color: #ffffff;
}
Problem getting
Okay, since you are already familiar with the clearfix concept, you are using it wrong. Change your code this way, to include the floated elements inside the .clearfix:
<div class="clearfix">
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
<div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
</div>
Adding height is a hacky way. Use the clearfix properly to nest the floated items.
And also on a side note, use <i> tag to display icons and not <div> tags. It works, but it is not semantically correct. A <div> should be used only for a division or a section.
Give min-height to each checkmark wrap i.e in your case .checkmark-33
Example-
.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}
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.
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