I'm trying to override/replace Font Awesome icon with background image. I have only CSS access.
What I have:
.btn.btn-default.bootstrap-touchspin-up:before {
font-family: Fontawesome;
content: "\f067";
font-size: 14px;
}
What I'm trying to achieve:
.btn.btn-default.bootstrap-touchspin-up:before {
background-image : url(Images/arrows-left-right.png);
font-family: initial;
content: "";
font-size: 14px;
height: 20px;
width: 20px;
}
You need these additional properties
width: 15px;
height: 15px;
display: inline-block;
background-position: center;
background-size: contain;
as mentioned by #Alexander De Sousa in comments, inline-block is much better choice to keep everything inline.
Try this
HTML:
<span class="btn btn-default"></span>
CSS:
.btn:before {
font-family: Fontawesome;
content: "\f067";
font-size: 14px;
}
.btn {
border-radius: 50%;
border: 2px solid black;
}
Demo :http://jsfiddle.net/GCu2D/5181/
display:inline-block;
That's all you need. As standard :before and :after are inline, so they'll collapse in regardless of height and width. Inline-block will get you what you want.
Related
I'm looking for the HTML code to create a short horizontal line centered inline with text (in a particular typeface) like the image.
Currently, the code I have is:
<span style="font-family:'Taner Ardali Antikor Mono Medium';">MY MISSION</span>
Note: I'm using this code for a text markdown or code block on my Squarespace site. I'm unfamiliar with coding, so not sure if that makes a difference.
You can use :after selector for this
.title {
font-family:'Taner Ardali Antikor Mono Medium';
font-size: 30px;
display: block;
}
.title:after {
content:"";
display: inline-block;
height: 2px;
width: 100px;
margin-left: 10px;
background: #111;
vertical-align: super;
}
<span class="title">MY MISSION</span>
Or It is possible to change HTML use heading tag like this:
.title {
font-family:'Taner Ardali Antikor Mono Medium';
font-size: 30px;
display: block;
position: relative;
}
.title span {
background: #fff;
position: relative;
z-index: 1;
padding-right: 20px;
}
.title:after {
content:"";
display: inline-block;
height: 2px;
width: 100%;
margin-left: 10px;
background: #111;
position: absolute;
left: 0;
top: 15px;
}
<h2 class="title"><span>MY MISSION</span></h2>
This question already has answers here:
Does height and width not apply to span?
(11 answers)
Closed 4 years ago.
I have a strange problem... I have a button, nothing special, just a button like so
<button class="btn btn--error">
Button Text
</button>
Now I wish to have a image besides my button text, I wish to do this using CSS rather than have an img tag in the button. So I use the :before pseudo element, here is my CSS (notice it is SCSS)
.btn {
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: capitalize;
text-decoration: none;
outline: 0;
margin-bottom: 2px;
padding: 0 0 0 0;
&:before {
background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
background-size: contain;
content: '';
width: 18px;
height: 18px;
}
}
the location of the image is correct however in the browser I see no background image...
However when I add to the content property to the :before pseudo element like so
&:before {
background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
background-size: contain;
content: '___';
width: 18px;
height: 18px;
}
I can now see the background image!
How can I make it so that I can see the background image without having to put text in the content property? Any help and advice is appreciated.
https://jsfiddle.net/4n1e8ksw/4/
Adding inline-block to pseudoelement. pseudoelement are by defualt inline and width and height for them is 0 if they have no content.
.btn {
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: capitalize;
text-decoration: none;
outline: 0;
margin-bottom: 2px;
padding: 30px;
&:before {
background: url("https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-512.png") no-repeat top left;
background-size: contain;
content: '';
width: 18px;
height: 18px;
display: inline-block;
}
}
In Firefox the SVG icon won't display. It is displayed in every other browser. Any idea why? Is this not meant to be supported?
HAML
.contact-form__error
.contact-form__error--icon
.contact-form__error--text Something went wrong. Please try again later.
CSS
.contact-form__error {
color: red;
font-size: 12px;
margin-top: 5px;
position: absolute;
line-height: 1em;
}
.contact-form__error--icon {
// content: image-url('icons/alert_error.svg');
content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg==');
width: 15px;
height: 15px;
vertical-align: text-bottom;
margin-right: 4px;
display: inline-block;
}
.contact-form__error--text {
display: inline-block;
vertical-align: middle;
}
http://codepen.io/Lightheaded/pen/NGZWyj
Attach it on :before or :after instead
.contact-form__error--icon:before {
content: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIGJhc2VQcm9maWxlPSJ0aW55IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTgzOTJlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Mi42IDYwYy0xIDMuNC00LjEgMy41LTUuMiAwLTEuMi00LTUuNC0yMy42LTUuNC0zMy41IDAtMTIuOSAxNi4yLTEzIDE2LjIgMCAwIDEwLTQuNSAzMC01LjYgMzMuNXpNNTAgODYuNGMtMy45IDAtNi42LTMtNi42LTYuOSAwLTQgMi44LTcgNi42LTcgNCAwIDYuNiAzIDYuNiA3IDAgMy45LTIuNiA2LjktNi42IDYuOXpNNTAgMEMyMi40IDAgMCAyMi40IDAgNTBzMjIuNCA1MCA1MCA1MCA1MC0yMi40IDUwLTUwUzc3LjYgMCA1MCAweiIvPjwvc3ZnPg==');
}
http://codepen.io/anon/pen/WQqbbM
I really need help on this: cracking me for 2nd day already. I have the following code:
* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
.plus:before {
content: "+";
}
<div class='inlbtn'><span class='plus'></span></div>
It basically has a div and span inside with a "+" symbol. The horizontal alignment seems fine, but the vertical is a little shifted down. How to make it perfectly centered vertically?
I played around with the code and it seems the code under * is the culprit, but why?
Here's fiddle http://jsfiddle.net/jk34josq/2/
You do everything right, I always use the same method. The problem is that this line
content: "+";
is a piece of text, so it automatically has top margin inside of the line-height preserved for the capital letters (and + symbol is not the one); the margin value could also be different depending on the font.
As a proof try the following:
content: "A";
This looks centered.
What you can do to avoid this behavior:
Negative margin / top property
Use image instead of text
Maybe play with reducing the line-height property but I have doubts about this method
I would use only a single HTML element, since there is no need for using an extra element nor a :before pseudo class:
<div class='inlbtn'>+</div>
Then I would use display: inline-block, instead of table.
As mentioned by Simon in his answer, the + character is smaller than A. But instead of using negative margins or paddings, I would alter the line-height:
.inlbtn {
width: 2rem;
height: 2rem;
font-size: 1.5rem;
line-height: 1.5rem;
display: inline-block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
Updated Fiddle
Try like this: Demo
.inlbtn {
width: 2rem;
height: 2rem;
display: block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: inline-block;
vertical-align: middle !important;
}
.plus:before {
content:"+";
display: inline-block;
}
This question already has answers here:
CSS circles without width or height? : Is this possible with pure CSS or not?
(4 answers)
Closed 7 years ago.
It appears setting my border-radius to either 50% or 100% didn't do the trick and gives the span tag a stretched appearance. Is it possible to get this circle perfectly symmetrical without setting a height or width to it?
span {
background: #232323;
border-radius: 50%;
color: #fff;
display: inline-block;
font-family: Arial, sans-serif;
padding: 6px;
}
<span>x</span>
A solution is to just set the width to the computed font height:
width: 1em;
span {
background: #232323;
border-radius: 50%;
color: #fff;
display: inline-block;
padding: 6px;
width: 1em;
text-align: center;
}
<span>x</span>
Something like this maybe?
span {
background: #232323;
border-radius: 100%;
color: #fff;
display: inline-block;
font-family: arial;
font-size: 20px;
text-align: center;
width: 1.35em;
padding-bottom:.2em;
}
span.medium {
font-size: 50px;
}
span.ridikulus {
font-size: 500px;
}
<span >x</span>
<span class="medium">x</span>
<span class="ridikulus">x</span>
To provide an alternative approach, instead of relying on border-radius, I was thinking about using a glyph • and position that on the span tag.
The size can be adjusted using font-size.
The big advantage is that you don't need to generate a perfect circle.
span {
color: #fff;
position: relative;
line-height: 1;
display: inline-block;
padding: 10px;
}
span:before {
content:'\02022';
color: #000;
font-family: sans-serif;
font-size: 10rem;
position: absolute;
z-index: -1;
line-height: 0;
left: -14px;
top: 20px;
text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
<span>x</span>