I have the following html:
<span class="targetIcon"/>${targetInfo}
Here, the class targetIcon is:
.targetIcon:before {
font-family: 'FontAwesome';
content: "\f56f";
font-size: 2em;
float: left;
margin-right: 10px;
}
When value of targetInfo is: Drag and drop a file or click to browse, this resolves as:
However, when targetInfo is a little long and thus moves to new line, this resolves as:
The second image above (multi-line) is correct.
However, in the first image, the text is not centered after the icon. How can I position the text at the center of the icon?
I want the positioning of both elements to be decided based on whether the text is single line or multi-line.
You can achive this with Flexbox:
.targetIcon {
display: flex;
align-items: center;
}
.targetIcon:before {
font-family: 'FontAwesome';
content: "\f56f";
font-size: 2em;
float: left;
margin-right: 10px;
}
<span class="targetIcon">Drag and drop a file or click to browse</span>
Related
I have a span element like so (I am modules.css hence the classnames look a bit strange) in a React component
<div className={`${styles["login-container"]}`}>
<span className={`${styles["a-icon"]}`}>Login</span>
</div>
Then in CSS the following
.login-container {
height: auto;
display: flex;
align-items: center;
gap: 5px;
}
.a-icon {
font-family: xyzFontLight;
height: 30px;
}
.a-icon::before {
content: "\e1ca";
font-family: xyzFontIcon;
margin-right: 5px;
font-size: 1.25rem;
}
The login Icon is created using a special customized font(these are custom fonts that I cannot share). The issue I am facing is that the icon & text don't line up.
How to get both of these inline?
I'm positioning an icon inside a button. To align the icon to the right of the button, I'm using float: right on the icon. But as you'll see, this causes the icon to overflow on Firefox, so I need another solution.
Things to note
I want the text in the button to be centrally aligned, so adding float: left to the text isn't an option
The icon needs to be floated to the right of the button
Here's the Sass for the icon and button:
.icon-icomoon
font-family: 'icomoon' !important
speak: none
font-style: normal
font-weight: normal
font-variant: normal
text-transform: none
line-height: 1
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.icon-arrow-right:before
content: "\e910"
.btn
border-radius: 0
padding: 20px 40px
font-weight: 600
font-family: $fontSansSerif
font-size: 1.9em
span.icon-arrow-right
float: right
font-size: 40px
.mobile-and-tablet-only
display: none
#media screen and (max-width: $mediaBreakpointTablet)
display: block
.desktop-only
display: none
#media screen and (min-width: $mediaBreakpointTablet+1)
display: block
Here's the HTML for the button:
<a href="#" class="btn btn-success">
<span class="desktop-only">
Let's make something awesome together
<span class="icon-icomoon icon-arrow-right"></span>
</span>
<span class="mobile-and-tablet-only">
Let's work together
<span class="icon-icomoon icon-arrow-right"></span>
</span>
</a>
Here's what it looks like in the browser on Chrome:
And here's what it looks like on Firefox. As you can see, the width of the text is at 100% which is causing the icon to overflow:
Try giving the a.btn position:relative and then positioning the span.icon-arrow-right absolutely (position: absolute). Then you can give the arrow icon any desired position by adding right: 3%; top: 33% to it.
you can use :after on your span
btn {
position:relative;
}
span{
text-align:center;
}
span:after {
content: url(myicon.png);
}
As this way, you didn't need this
<span class="icon-icomoon icon-arrow-right"></span>
example
example 2
OR you can use display: inline-block by giving them width in %. Also you can use display:flex.
Like this.
span{
font-size:16px
}
img{
vertical-align:-15%;
}
<button>
<span>My Text</span>
<img src="https://rack.pub/media/bitcoin.png" height="16px" >
</button>
You can try to make the spans inside the button inline blocks (to prevent spanning 100% of the button width). Also don't forget to use clearfix to the parent container (.btn) of the floated span.
.btn {
text-align: center;
#include clearfix();
> span {
display: inline-block;
&.icon-icomoon {
float: right;
}
}
}
#mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
I have a third party product which outputs an icon via an <img> tag with a background-image set via css.
I could probably write some javascript to change the html tag itself to something different but I would rather change the css to display a FontAwesome icon using the :before and content="{FontAwesomeText}".
However, I cant get this to work...does someone know if this is possible to do this?
Please see
.x-tree-icon-leaf:before {
content: "";
font-size: 0.6em;
position: relative;
top: -3px;
}
.x-tree-icon-leaf {
font-family: FontAwesome;
width: 20px;
height: 20px;
display: inline-block;
color: #5fa2dd;
}
https://jsfiddle.net/uz9q6m33/
Your jsFiddle did not properly import the FontAwesome library.
You can't just copy paste the character and place it inside content, you need the proper unicode value of that specific icon, which is: \f06c
img cannot have pseudo elements, use a classed sibling or parent for the icon and hide the image with display: none.
Working code:
.x-tree-icon-leaf, .x-tree-icon-text::before {
font: normal normal normal 14px/1 "FontAwesome";
display: inline-block;
color: #5fa2dd;
}
.x-tree-icon-leaf::before, .x-tree-icon-text::before {
content: "\f06c\00a0";
font-size: 1em;
position: relative;
top: -1px;
}
img.x-tree-icon-leaf { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<!-- working with normal span -->
<div> <span class="x-tree-icon-leaf"></span> <span>Hello</span> </div>
<!-- hiding image then applying icon to text-span -->
<div> <img class="x-tree-icon-leaf"> <span class="x-tree-icon-text">Hello</span> </div>
jsFiddle fork: https://jsfiddle.net/azizn/1y3jwnsg/
Note: Add \00a0 at the end of content:'' string to force a space for consistency.
The icon is applied to x-tree-icon-leaf and x-tree-icon-text at the same time. When x-tree-icon-leaf is an img tag, it will be hidden.
Whole code : http://jsfiddle.net/3TQq6/
I'm making theme for my blog.
In the title part, there is a problem.
<div class="post_title">
<br/>
<h2>[##_article_rep_title_##]</h2>
<span class="post_cate">나만보기</span>
<span class="post_date">[##_article_rep_date_##]</span>
</div>
h2 tag will show the title of the article.
first span tag will show the category of the article.
second span tag will show when the article upload.
They are in one line.
h2 and span starts from left side, second span starts from right side because of float.
When I run the code, two spans have different vertical position.
http://goo.gl/vZwSzz
second span is placed higher than the first span.
I want that two span tags have the same vertical position.
but don't move first span tag. I want to adjust the second to the first.
How can I move the second span?
You can try the following:
DEMO
Remove float: right from .post_date, and then add the following css rules:
.post_title {
position: relative;
}
.post_date {
position: absolute;
bottom: 6px; /* Adjust this to match the height of .post_cate */
right: 0px;
}
There's two ways to do it. One is to keep the float right and position it properly with margin-top pushing the date down:
.post_date {
margin-top: 16px;
}
This positions it when everything is all on one line, but if there's multiple lines the date will be off. The second method is to use position: absolute to align it to the bottom:
.post_title {
position: relative;
}
.post_date {
position: absolute;
right: 0;
bottom: 9px;
}
Results: http://jsfiddle.net/3TQq6/1/
Try this, fiddle
<div class="post_title">
<br/>
<h2>[##_article_rep_title_##]</h2>
<span class="post_cate">나만보기</span>
<span class="post_date">[##_article_rep_date_##]</span>
<br/>
</div>
.post_title h2 {
display: inline;
float: left;
font-size: 15pt;
}
.post_title span {
color: #bababa;
line-height: 30px;
}
.post_cate {
float: left;
}
.post_date {
float: right;
}
I have the following (excerpted) html:
<span id="version">Version 1 <small>Last modified 04/August/2012</small><br>unfinished</span>
and the following (excerpted) css:
#version {
font-size: xx-large;
color: Black;
text-align: left;
margin-left: 35px;
}
#version small {
font-size: 50%;
}
Everything displays correctly until after the <br>, where the text isn't adjusted for the margin. Why isn't it adjusted after the <br>?
Because the span is an inline element. Do accomplish what you want, either set the display property on the span to block or inline-block, or change the span to a div.
jsFiddle example