Can this be done with icon font and :before?
Aim: a large icon centered in a div with a text label centered below it.
The old way I would do this would be a background image and padding-top to render the image above the div content.
Would prefer to use an icon font. Displaying an icon to the left of the text is easy enough using :before but is it possible to display it above instead?
Thanks.
EDIT: I have no code other than bog standard icon font usage:
.mydiv:before {
content: "\f11c "; /* this is the Unicode for the icon */
font-family: FontAwesome;
margin-right: .2em;
}
this places an icon befor the text. Don't even know if possible to posisiton it above instead.
Could it be something like this?
.mydiv {
font-family: sans-serif;
width: 120px;
padding: 10px 0;
text-align: center;
border: 1px solid #000;
border-radius: 3px;
background: #333;
color: #fff;
}
.mydiv:before {
content: "\f11c ";
font-family: FontAwesome;
display: block;
margin-right: .2em;
text-align: center;
}
http://jsfiddle.net/4W8dg/
Related
So i wish to put an icon above an h3 solely using css. Reason being that i don't wish to edit the html in a wordpress plugin.
So i decided to use pseudo element ::before which displays the icon correctly but places it before the h3 rather than above.
Adding display:block solved this issue until i decided to put a border around the icon, which then puts a border around the entire block, which is not what i want.
So i'm looking for better options if anyone can advise.
h3.icon:before {
font: normal normal normal 16px/1 FontAwesome;
content: "\f0c1";
display: block;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #000;
}
<h3 class="icon" style="color: #000000;">Los Angeles</h3>
h3.icon:before {
font: normal normal normal 16px/1 FontAwesome;
content: "\f0c1";
display: block;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #000;
text-align:center;
width:50px;
margin:auto;
}
<h3 class="icon" style="color: #000000;">Los Angeles</h3>
Not exactly sure what you want to achieve, do you want a border around the icon but not with all the extra padding in the block?
If that is the case try giving it a width and margin either side.
I am trying to make this menu
now so far i can get to this point where i have the > appearing before each <li> with a margin of 10px before the text but the problem is that i can't get the circle
i tried adding <divs> thinking i could just give it a background-color and border-radius but the problem is that the html comes up as text so i wouldn't be able to apply any css to it.
the easiest solution would be to add a <div> in each <li> however the list is generated by a php function which returns the HTML as a single string. i could use str_replace() to locate every opening <li> and add in a <div> or do the same thing in javascript but i want to know if i can do this though CSS
Try using li:before with a content of > to make these bullet points, like so:
li:before {
align-items: center;
background-color: #fcbe35;
border-radius: 50%;
color: white;
content: '>';
display: inline-flex;
font-weight: bold;
height: 24px;
justify-content: center;
margin-right: 10px;
width: 24px;
}
Here's a JsFiddle.
CSS
ul{
list-style-type:none;
}
li::before {
content: ">";
background: gold;
font-family: serif;
font-style:bold;
display:inline-block;
font-weight: 800;
padding: 1px 3px;
line-height: .8em;
text-align:center;
vertical-align: center;
margin:0px 10px 0px 0px;
border-radius: 50%;
color: #fff;
}
EDIT: updated to make it look better.
How about making those circles in a Photo Editing Software and using them as the marker of your list like this :-
li{
list-style-image : url("circles.gif");
}
Or if you just don't want to use an Image :-
li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}
use an image: list-style-image: url(...);
Use pseudo elements as 'li::before' to adjust the pointers dynamically using only CSS.
how to remove white space between slider and navigation? Can't find the css tag to remove the white space. Thanks
Here's the CSS of slider:
#slider-banner {
overflow: hidden;
background: #111;
Navigation
.main-navigation {
clear: both;
display: block;
font-weight: 300;
font-family: 'Lato', sans-serif;
position: relative;
border-bottom: 3px solid #04A3ED;
background: #00ABFF;
Here's the site
Had same problem. I used .pull-left and .pull-right from jQuery to split my navigation bar.
It looks like both of them had margin-bottom: 10px; by default in CSS. So, change it in your own css to 0px so it will override jQuery.
I have a html button with below CSS.
.myButton{
background: url("../images/button.png") no-repeat top left;
height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
}
It renders nicely in IE. But in Fire Fox it does not render the text in center. It renders as below:
How can I align the text to center in FF. In IE it is proper?
There must be additional CSS code that applies to your button. With only the given CSS the button looks different: http://jsfiddle.net/xQmHA/
<button class="myButton">TEST</button>
You can check which style rules apply to your button from within Firefox (F12 --> CSS --> Select your button)
I changed background: url("../images/button.png") no-repeat top left to background: url("../images/button.png") no-repeat top center and is working fine....
Try this,
.myButton{
padding:0;
background: url("../images/button.png") no-repeat top left;
height: 21px;
line-height: 21px;
width: 78px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
border: medium none white;
outline:0 none;
}
You need to reset default style sheet of any browser before adding your styles. In this case I suspect it is the padding that is by default added by FF/IE that makes it not work for you.
Please find an Appropriate reset style for the Element before you add your own.
I've got a problem in Google chrome where the placeholder text sits too high on my website
http://www.myinvestmentdecision.com.au
Click "Feedback" and you'll see the text in the placeholder sits to high. I've got a placeholder script, but it turns off when it realises that chrome has support for placeholder.
Just to proove that point here's a jsfiddle of the form itself: http://jsfiddle.net/RAANa/
Must be a CSS thing. Any ideas?
Remove line-height:28px from your css below.
.form input[type="text"], .form input.text, .form .calculate_box .calc {
background: transparent url(../images/input-background.png) repeat-x left top;
border: 1px solid #A1A1A1;
margin-left: -1px;
height: 28px;
line-height: 28px;
display: block;
width: 284px;
}
See attached screenshot with line-height removed
I think your line-hight:28 from here: (form.css)
.form { font-family: arial, sans-serif; }
.form input[type=text],
.form input.text,
.form .calculate_box .calc{
background: transparent url(../images/input-background.png) repeat-x left top;
border: 1px solid #a1a1a1;
margin-left: -1px;
height: 28px;
line-height: 28px;
display: block;
width:284px;
}
Is causing the problem. Remember that this declaration applies to the content of the tag, as well as the tag itself. This can get you when it comes to forms..
Not sure if this is the "right" way to do it, but adding a padding of 5px to the input field would center the placeholder for the email field.
Just add this to your CSS wherever it applies to that email field:
padding: 5px;