This question already has answers here:
How do you make div elements display inline?
(20 answers)
Display Images Inline via CSS
(3 answers)
How to make the <img> tags line up horizontally in the div?
(5 answers)
How to put img inline with text
(3 answers)
Closed 5 years ago.
Im just having a frustrating time trying to emulate this - where the arrows function as buttons and text sits below the img -
For CSS, Ive tried as other questions suggest:
.ico-selector {
display: inline-block;
width: 123px;
float: left;
}
Example
.ico-selector {
display: inline-block;
width: 123px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ico-selector">
<i class="fa fa-chevron-left"></i>
<img src="https://d1j8pt39hxlh3d.cloudfront.net/development/emojione/2.2/843/2270.svg" />
<p>My Icon</p>
<i class="fa fa-chevron-right"></i>
</div>
but they remain vertically stacked. How can I do this?
You can simply do this :
.ico-selector {
width: 123px;
text-align: center;
display: inline-block;
}
/*adjust these values as you need*/
.ico-selector img {
width: 65%;
margin: 0 5px;
}
.ico-selector>* {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="ico-selector">
<i class="fa fa-chevron-left"></i>
<img src="https://d1j8pt39hxlh3d.cloudfront.net/development/emojione/2.2/843/2270.svg" />
<i class="fa fa-chevron-right"></i>
<p>My Icon</p>
</div>
I assume your ico-selector box has fixed dimensions. Why not just position the chevrons absolutely within that box?
.ico-selector {
position:relative;
display: inline-block;
width: 123px;
}
.fa-chevron-left{
position: absolute;
left:0;
top: 50%;
}
.fa-chevron-right{
position: absolute;
right:0;
top: 50%;
}
Its a rather rough example but it illustrates the idea.
You can use divs to surround each part of your icon selector like this:
.ico-selector {
width: 123px;
height: 200px;
line-height: 200px;
}
.left-arrow, .icon, .right-arrow {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ico-selector">
<div class="left-arrow">
<i class="fa fa-chevron-left"></i>
</div>
<div class="icon">
<img src="https://d1j8pt39hxlh3d.cloudfront.net/development/emojione/2.2/843/2270.svg" />
<p>My Icon</p>
</div>
<div class="right-arrow">
<i class="fa fa-chevron-right"></i>
</div>
</div>
Related
This question already has answers here:
Can't put icons into the search bar
(3 answers)
Closed 6 months ago.
I tried adding a search icon from font awesome to my search bar but the icon is just staying outside of the bar. below is my code
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="section-b">
<p> <input type="text"><i class="fa-solid fa-magnifying-glass"></i></p>
</div>
it works if you put your icon where i wrote icon
.icon {
position: absolute;
}
.section-b{
position: relative;
}
<div class="section-b">
<span class="icon"> icon </span>
<p> <input type="text"></p>
</div>
Make .section-b have relative positioning and use absolute on the icon.
.section-b {
position: relative;
width: 200px;
}
.section-b .input {
border: 1px solid #ccc;
background: #fff;
height: 20px;
width: 200px;
}
.section-b .fa-magnifying-glass {
cursor: pointer;
position: absolute;
top: 47%;
right: 0;
transform: translateY(-50%);
background: #fff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="section-b">
<input class="input" type="text" name="Search" placeholder="Search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
Step 1: wrap the input and i tags in a div
Step 2: make the div display:inline-block and position:relative
Step 3: make the i tag position:absolute and add top:0, and right:0
div {
position: relative;
display: inline-block;
}
i {
position: absolute;
right: 0;
top: 0;
margin: 3px 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div>
<input type="text">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
First, use span instead of i to house your icon. It's more semantically correct as supposed to using the italics tag.
Next, just set the span to position: absolute and then reposition the icon using the top and left properties.
span {
position: absolute;
left: 8.5rem;
top: 1.2rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="section-b">
<p> <input type="text"><span class="fa-solid fa-magnifying-glass"></span></p>
</div>
I'm trying to create a top bar with the following structure
Tel:4949494949 social media icons
In the middle I'm trying to have contact info and at almost in right my social media icons.
I'm not able to place social media in right. CSS always gets them to the middle, next to contact info.
What is wrong?
#tpbr_box .a {
width: 10%;
height: 20%;
text-align: center;
display: inline;
font-size: 20px!important;
}
#tpbr_box .social2 {
float: right;
}
#tpbr_box {
font-size: 20px!important;
}
<div class="info">
<i class="fa fa-home"></i> |
<a style="color:white;" href="tel:54543">354353535</a>
</div>
<div class="social2">
</div>
I switched out the div classes because when you use a new one, it writes itt in a new line. I fixed this by using a a-class instead of a div, still giving an class to each one. The reason why I used width and margin-left with percents is no matter the length, the html will adjust(ex. you resize the window, it resizes with it).
.topbar {
width: 100%
}
.info {
margin-left: 45%
}
.social2 {
margin-left: 55%
}
<div class="info">
<a class='center'>
<i class="fa fa-home"></i>
354353535
</a>
<a class='social2'>
f
t
i
y
</a>
</div>
Based on your requirements, Info to the middle, and social to the right side!
Try this:
<!-- Html code -->
<div class="top_nav">
<div class="info">
<i class="fa fa-home"></i> |
<a style="color:whites;" href="tel:54543">354353535</a>
</div>
<div class="social2">
</div>
</div>
And here is the CSS style:
#tpbr_box .a {
width: 10%;
height: 20%;
text-align: center;
display: inline;
font-size: 20px!important;
}
#tpbr_box .social2{
float:right;
}
#tpbr_box {
font-size: 20px!important;
}
.top_nav{
display: flex;
}
.top_nav .social2 {
position: absolute;
right: 14px;
}
.info{
margin: 0 auto;
}
Make sure add parent div with "top_nav" class to control the style.
I think the problem comes from the fact that you put a text-align: center; on your links. Putting a text-align: center; on the tags a, all your links present on your page will go to the middle.
I have an issue i know it is small but for my necessity i have doubt when i hover on one div i want second div should display and remove cursor again it should hidden how to do this using css
div 2 which will be hidden so when hover on div it should show this div tag and again hover remove it should get hidden using css
<div>
<a href="javascript:void(0)">
<div class="show-all-hover-zone" style="height: 212px;">
<i class="fa fa-chevron-left" style="font-size:25px;color:darkslategrey;position:relative;top:97px;"></i>
</div>
</a>
<div style="background-color:whitesmoke;padding: 3px;height:210px;width:0px;position:absolute;top:164px;display:none;" class="expand-menu1">
</div>
In your case
a:hover ~.expand-menu1{
display: block !important;
}
But don't use inline, please. It can be much more elegant.
For example:
HTML
<a class="hoverOnShow" href="javascript:void(0)">
<div class="show-all-hover-zone">
<i class="fa fa-chevron-left" ></i>
</div>
</a>
<div class="expand-menu1">
</div>
CSS
.show-all-hover-zone{
height: 212px;
}
.fa-chevron-left{
font-size: 25px;
color:darkslategrey;
position:relative;
top: 97px;
}
.expand-menu1{
background-color:whitesmoke;
padding: 3px;
height: 210px;
width: 0px;
position:absolute;
top: 164px;
display:none;
}
.hoverOnShow:hover ~.expand-menu1{
display: block;
}
EDIT: Please disregard the phone/email row.
I would like to reach this kind of result:
Since I need the side texts to be as the same height of the icon, I am having some issues with the relative and absolute div wrappers and how to set them right.
HTML
<div class="row topWrapper">
<div class="iconWrapper">
<i class="fa fa-user-circle-o fa-2x"></i>
</div>
<div class="captionWrapper">
<h5><strong>Liat </strong></h5>
<h5>Your recruitment counsel</h5>
</div>
</div>
SCSS
.topWrapper {
background-color: #d9534f;
height: 150px;
.iconWrapper {
background-color: #f7ecb5;
display: inline-block;
position: relative;
width:16.67%;
i{
position: absolute;
top: 50%;
#include translate(0, -50%);
}
}
.captionWrapper{
background-color: #245580;
display: inline-block;
}
}
You don't need to use absolute position to get what you want, just a few things and you are good to go.
See code snippet:
Note: i didn't use SCSS for demonstration purpose
.topWrapper {
background-color: #d9534f;
height: 150px;
padding: 5px;
}
.iconWrapper {
display: inline-block;
font-size: 17px;
}
.captionWrapper {
display: inline-block;
}
.captionWrapper h5 {
margin: 2px;
/*reduce the margin to make the two texts aligned with the icon*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row topWrapper">
<div class="iconWrapper">
<i class="fa fa-user-circle-o fa-2x"></i>
</div>
<div class="captionWrapper">
<h5><strong>Liat </strong></h5>
<h5>Your recruitment counsel</h5>
</div>
</div>
This question already has answers here:
Is it possible to apply CSS to half of a character?
(20 answers)
Closed 7 years ago.
I want to achieve the following effect with CSS:
This star icon is a font. I would like to define the width of the orange background by percents, so 50% should be the perfect half of the star.
For now, I did the following:
<div class="container">
<span class="star star-under fa fa-star"></span>
<span class="star star-over fa fa-star"></span>
</div>
And:
.container
{
font-size: 200px;
height: 300px;
position: relative;
width: 100%;
}
.star
{
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
.star-under
{
color: #ddd;
}
.star-over
{
color: #f80;
overflow: hidden;
width: 30%;
}
The problem is that I need to provide the width and height in order to use % of width. And if I skip the container's width and height, it displays nothing, because it contains absolutely positioned children.
This % value is calculated on server side, so I'd rather keep it inline, like this:
<span class="star star-over fa fa-star" style="width: 62%;"></span>
What is the most flexible way to do this? By most flexible I mean the one that doesn't make it necessary to provide any width nor height.
You can set the container to display:inline-block, and only set the top icon to position:absolute.
.container {
font-size: 200px;
position: relative;
display: inline-block;
}
.star-under {
color: #ddd;
vertical-align: top;
}
.star-over {
color: #f80;
position: absolute;
left: 0;
top: 0;
width: 70%;
overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<span class="star star-under fa fa-star"></span>
<span class="star star-over fa fa-star"></span>
</div>