I'm not very experienced with web front-end development.
The web designer provided me with a JPG file that contains a bar full of icons.
https://i.sstatic.net/3fmAx.png
However, I need to use these icons individually.
I'm unsure if there is an easy way to load a single icon from this large image, like:
load_part_from_picture (fileName, oneIconSize=80x80, index=1)
Alternatively, do I have to manually cut out each individual icon?
I am using ASP.Net and C# for programming
Thank you!
ul li {
background-image: url('https://i.sstatic.net/3fmAx.png');
background-repeat: no-repeat;
height: 60px;
width: 60px;
display: inline-block;
}
ul li:nth-child(2) {
background-position: -60px 0;
}
ul li:nth-child(3) {
background-position: -120px 0;
}
ul li:nth-child(4) {
background-position: -180px 0;
}
ul li:nth-child(5) {
background-position: -240px 0;
}<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>To implement this feature, utilize CSS classes. This method is known as CSS sprites, which is an optimization technique. For further information on CSS sprites, refer to this link and this one
You can view a live demo in this Fiddle
.first-icon {
width: 60px;
height: 60px;
background: url('https://i.sstatic.net/3fmAx.png') 0 0;
}
.second-icon {
width: 60px;
height: 60px;
background: url('https://i.sstatic.net/3fmAx.png') 65px 0;
}
.third-icon {
width: 60px;
height: 60px;
background: url('https://i.sstatic.net/3fmAx.png') 125px 0;
}
Incorporate the icons into your HTML like so:
<div class="first-icon"></div>
<div class="second-icon"></div>
<div class="third-icon"></div>
Using a single common class with separate classes for sprite images can help optimize your CSS styling.
.icon{height:30px; float:left; margin-left:10px; width:30px; background:url("icon.jpg") no-repeat;}
.icon.home{background-position:0 0;}
.icon.services{background-position:-40px 0;}
.icon.product{background-position:-80px 0;}
.icon.about{background-position:-120px 0;}
<div class="icon home"></div>
<div class="icon services"></div>
<div class="icon product"></div>
<div class="icon about"></div>
Your designer has provided you with an image sprite, which is a single image containing multiple images.
By using image sprites, you can reduce the number of server requests and save bandwidth.
Here's how you can implement it:
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 65px;
height: 60px;
background-image: url("https://i.sstatic.net/3fmAx.png");
background-position: 0 0;
}
#next {
width: 60px;
height: 60px;
background-image: url("https://i.sstatic.net/3fmAx.png");
background-position: 65px 0;
}
</style>
</head>
<body>
<img id="home" src="http://www.w3schools.com/css/img_trans.gif"><br><br>
<img id="next" src="http://www.w3schools.com/css/img_trans.gif">
</body>
</html>
NOTE : The
<img>tag uses a 1px X 1px blank image so that you can see the individual images clearly without overlap from the original image. This method can also be achieved using<div>if you prefer not to use<img>
For further information, visit: http://www.w3schools.com/css/css_image_sprites.asp
I have a pair of radio buttons and two sets of select options within different classes. Upon selecting the first radio button, the select options belonging to class1 should be enabled. On the other hand, upon selecting the second radio button, the select ...
Seeking assistance for implementing functionality that replaces a button with an input field, where users can enter information and hit enter. Once the action is completed, the original button should reappear. The current script works effectively but lacks ...
I'm facing an issue while trying to apply currency formatting to an HTML table in order to have it display correctly when opened in Excel. Initially, I tried doing this inline and it worked fine, like so: <td style="mso-number-format:$\##&bso ...
I am looking to create a row of images that aligns with the same margin-left as other content on my webpage, similar to the title in the example image provided. This row of images should scroll horizontally and extend all the way to the edges of the page. ...
Here is the code snippet I am working with: <div class="input-group"> <form method="POST" id="id1"> <input id="id2" type="text" style="min-width: 370px;" class="form-control" placeholder="..."> </form> </div> ...
My website's bootstrap navbar hamburger icon is too small for visitors to see. I tried adjusting the size, but had no success. Does anyone have any suggestions on how to solve this issue? For reference, I am using the most recent versions of bootstra ...
$('#clickMe').click(function() { $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn'); }); <link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/> <script ...
I am currently working on a form that is functional, but it does not send predefined values. Some fields have predefined values such as the user and total amount. While it does send the values entered by the user, it doesn't include the predefined one ...
I encountered an issue with " browserLink " that you can see below <div ng-show="optList.editing && optList.BANKRUPT_FLG != 'Y' && (optList.OPT != 'TF' || (optList.OPT == 'TF' && optLi ...
Is there a way to display the code <p></p> as text on an HTML page without it being processed as HTML, resulting in an empty paragraph? ...
Is there a way to determine if an element exists on a webpage using jQuery? For instance: <html> <body> <p id="para1" class="para_class"></p> </body> </html> In the code above, I need to check if the ...
I'm struggling to add an object to another object. I've created an object with two properties and now I want to assign it to another object. $scope.urlMappings = {}; $scope.Mapping = function() { ...
In the startup file, I have set up the following settings: app.UseMvc(routes => { routes.MapRoute( name: "register", template: "Register/", defaults: new { controller = "Account", action = "Register" }); routes.MapRoute( ...
Currently, I am on the PayPal page and I need to automate clicking the agree button. <form id="ryiForm" class="proceed ng-pristine ng-valid" ng-class="{true: 'validated'}[validated]" ng-submit="confirm.$valid && onPay()" novalidate= ...
What am I trying to achieve? I am attempting to use jQuery to dynamically highlight the current page from the navigation bar. Am I new to jQuery/HTML? Yes, please excuse my lack of experience in this area. Have I exhausted all resources looking for a sol ...
I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...
Looking to enhance our ERP application with a mega menu feature. Does anyone have a link to a free Bootstrap mega menu template? I've searched on Google but haven't been able to locate the right one. ...
I'm currently in the process of setting up a basic Angular application, something I've done many times before. I have defined a home state and another state for a note-taking app, but I am facing an issue where neither state is displaying or inje ...
My PHP page has a menu tab with tabs labeled as Dash and Project. The Dash tab contains a table displaying data. The scenario is that when I click on a row in the table within the Dash tab, it should navigate to the Project tab, where a simple form is disp ...
I am trying to set the background to be full width like the image below (must be responsive). However, when I applied it, the result looks like this and crops the bottom part. Can someone please assist me with this issue? ...