I'm adding icon with Twitter Bootstrap without problem. They have a lot of alternatives.
http://twitter.github.com/bootstrap/base-css.html#icons
However, I couldn't find appropriate icon for one of menu item. It is about "car".
What I want is I would like to add my custom icon. How can I do this?
You can create your own icon by defining it in your own class like s:
.icon-car {
background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png");
background-position: center center;
}
Keeping in mind of course to use the prefix .icon-* since it is targetted by an attribute selector set by the bootstrap to apply all styles (widh/height/line-height etc...).
Just try to keep to the same width and height as the original icons (14x14), this way you won't have to define your own width and height and it won't mess with the line-height of your elements. Here is a demo with such a case: http://jsfiddle.net/RwFeu/
Here's what we do, so that all the icons are in a single sprite file and you can allow arbitrary sized icons.
create a CSS file like
[class^="icon-custom-"],
[class*=" icon-custom-"] {
background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8");
}
.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; }
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px }
And then in your markup,
<i class="icon-search"></i> a standard bootstrap icon
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file.
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon
<!-- spritefile from www.10000ft.com. not for reuse, please -->
Note that this assumes a single sprites file that contains all the icons. If you have multiple sprite files, the background-image needs to be set for each icon, accordingly.
JSFiddle at http://jsfiddle.net/shyamh/cvHdt/
This solution is based on the example posted by Kevin
Related
I want to add a link in pure CSS.
Tried to add the url in background as the code below. Unfortunately, it does not work.
.fa-home:before {
font-size: 2rem;
vertical-align: middle;
padding-right: 0.5rem;
background: url(https://example.com);
}
The icon looks like:
Is any ways to achieve this just using CSS? (Assume having no access to the control of HTML and JS.)
There is no way to do it using CSS.
CSS - Cascading Style Sheets. It describes how HTML elements are to be displayed on screen, paper, or in other media. In simple words - HTML creates elements like images, links and CSS add a style.
Using url in background is similar to src="" attribute in img tag. You provide the url to the image you want to use as background image.
I found some icons on Flaticon.com to use them in the navigation menu of my blog. In this case I wanted to replace the text "Home" with a house icon using the Base64 code.
This is the current code that was used on my site:
.menu-item-36 {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNC…ToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYII5467651096249186f76b4680bd54615d');
margin-left: 10px;
height: 40px;
}
I changed background-image to content in order to hide the original text 'Home' and replace it with the icon.
Now the problem: When I use the code above, the icon has a black color. I would like to use a white color instead. When I set the class to color: #fff; or fill: #fff; it doesn't work.
How can I this issue?
To hide the text, you should not change the background css property to content. I don't know iff you should even use content for anything else then the ::before and ::after psuedo elements.
But for your questions:
To hide text, you should use one of the possibilities given in this answer:
https://stackoverflow.com/a/471538/2012433
To make your image white, there is a hacky solution, namely using this css:
-webkit-filter: invert(100%);
filter: invert(100%);
But better would be to download the image and edit it to white. Then get the base64 code at for example http://www.base64-image.de/
Finally when you set that image as background-image, the following css will fit it nicely in your menu:
background-size: contain;
background-position: center;
Im trying to change the default expand/collapse icons to bigger icons. I've set the following css change which doesnt seem to be taking any effect:
.k-treelist .k-minus {
background: url('../img/Misc/customCollapsedIcon.png') center center;
}
.k-treelist .k-plus {
background: url('../img/Misc/customExpandedIcon.png') center center;
}
Can anyone give me some advice on what I need to change for this to take affect on the TreeList?
Try specifying the exact height and width for each new icon, in these CSS rules.
If that doesn't work, make sure that other CSS rules aren't overriding these rules.
with the 2016 Q1 version you need to use
.k-treelist .k-i-expand{
background: url("/Content/...") center center no-repeat // i'm on an asp.net web app
}
.k-treelist .k-i-collapse{
background: url("/Content/...") center center no-repeat
}
i was using font awesome icons so i had to go to http://fa2png.io/ and convert chevron-right to a png and save it 16x16
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.
Is it possible to use CSS sprites for "foreground" images -- i.e. images that users are supposed to click on and interact with and maybe even print?
Instead of using the CSS background-image property. What would you use?
You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.
I have solved this problem using img tags and using the object-fit and object-position properties in my css. Here's a sample of the html and css I used:-
HTML
<img src="<your image source>" class="sprite-icon sprite-icon-1 " />
CSS
.sprite-icon {
height: 20px;
width: 20px;
object-fit: none;
}
.sprite-icon-1 {
object-position: 0 0;
}
.sprite-icon-2 {
object-position: -20px 0;
}
Obviously, you need to change the position and the size parameters according to the sprite you are using. For a full working example, check out this fiddle
You can do this with less CSS like this:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Whatever has the class class="myClass" will have just the image in it, nothing else. This can be a <a> an <input> or a normal <div>, whatever you want.
It's a background image...but it's the element you're looking at, nothing's in front of that background. Just because you're using background-image for the property doesn't mean it's not a foreground element...like a button you can click on. You can do that like this:
<input type="button" class="myClass" />
One primary requirement that cannot be handled by background images is for ARIA. All ARIA requirements will reject the use of background images for meaningful, navigational, and other 'informative' uses that a screen reader must interpret on behalf of a user with a disability. Being able to swap out a background image css statement for an img tag and some ARIA tagging whenever necessary is a critical feature in the current regulated development environment.
The answer to the original question is yes! It is possible to use the image that is displayed in a css background statement. But you must open the sprite image in an image editor and select out the portion that represents the sprite you want and save it as a separate image and reference it in an img tag.
The challenge is that often, these situations arise in a pre-built control library. Finding and altering the code in the library that selects and displays the background image is a little difficult, changing out the code is hard!
#Waughwaugh's answer https://stackoverflow.com/a/50715682/2733244 using object-fit and object-position is a simple and solid solution for this problem. Its only downside is that it won't support some older browsers. If you still need to target IE11 you can instead work with clip-path and negative margins:
.sprite {
width: 240px;
height: 20px;
}
.sprite-1 {
clip-path: polygon(60px 0, 80px 0, 80px 20px, 60px 20px);
margin-left: -60px;
margin-right: -160px;
}
Full demo: https://jsfiddle.net/wortwart/8omfcyxb/10/
Using "real" images instead of background is often semantically better (e.g. for icons) and can have benefits for accessibility: If the image has not loaded or was blocked by the user we still have <img>'s built-in alt description. Accessibility is more than just screenreaders ...
The best approach of course is to ditch CSS sprites and simply load the images separately with HTTP/2.
You can do this, but you have to use background images for sprites as you have to be able to set position. This can be used for links or whatever you want. Look at Googles sprite, they use it for there buttons on iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif