I am having trouble viewing an image on my screen

I am trying to add an icon to the left side of my "Skriv ut" text, but unfortunately it is not displaying correctly.

This is how I want it to look:

https://i.stack.imgur.com/6jcne.png

Here is the code snippet I am using:

<div class="col-md-4 col-md-offset-4">
            <a href="javascript:window.print();" class="Print">Skriv ut</a>    
    </div>

CSS

.Print:link, .Print:visited {
    background: url(../img/Icon.png) 0 -320px no-repeat transparent;
    float: left;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6px;
    padding-left: 22px;
}

http://jsfiddle.net/j3jof9ex/3/

htmlcss

Answer №1

After making a few adjustments, the code is now functioning correctly. I trust this aligns with your expectations. Feel free to view the Jsfiddle link here.

Here is the HTML code snippet:

<div class="col-md-4 col-md-offset-4">
  <div class="print-icon"></div>
  <a href="http://www.google.nl" target="_blank" class="Print">
    <img src="http://placehold.it/50x50">
    Print
    </a>
</div>

This is the corresponding CSS code:

.Print:link,
.Print:visited {
   float: left;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 6px;
   padding-left: 22px;
}

Answer №2

To achieve this effect, follow the steps below:

Custom CSS Styling

.Print:link, .Print:visited {
    background: transparent url(http://example.com/image.jpg) no-repeat left center;
    float: left;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6px;
    padding-left: 60px;
}

Note: You can customize the background image positioning with this code: 

background: transparent url(http://example.com/image.jpg) no-repeat left -10px center 20px;

SEE LIVE DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stylish Titles with Bootstrap

I have been trying to eliminate the border that is creating the panels Body, but I am encountering some difficulties in locating it. Here is the code snippet for my panel: <div class="panel"> <div class="panel-heading"> <span class ...

htmlcsstwitter-bootstrap

Does every controller page need to verify the Login Function?

In my PHP pages, I have implemented the MVC Pattern by creating a controller page for each view page to interact with the Model page. However, I have only checked user login at the top of every view page and not in the controller page. This leaves a potent ...

phpjavascriptjqueryhtml

What is the best way to assign attributes to multiple HTML elements using an array?

Seeking assistance to hide various sections in my HTML file upon button click, with the exception of one specific section. Encountered an error message: Uncaught TypeError: arr[i].setAttribute is not a function Here's a snippet of my code: const hide ...

javascripthtml

What is the process for ensuring that the "ng-multiselect-dropdown" is a mandatory field within Angular 7?

Is there a way to require the ng-multiselect-dropdown field to have at least one selected item? <ng-multiselect-dropdown [placeholder]="'Select countries'" [data]="countries" [(ngModel)]="countriesSelectedItems" [settings]="co ...

cssangulartypescriptdrop-down-menuangular7

Which tools are best suited for Xamarin development?

Recently, I've been contemplating how to style my app. One common approach is using CSS, but the question that lingers in my mind is whether it's truly compatible and if I should begin utilizing CSS. Is there perhaps a different language that wou ...

androidcssiosxamarinstyling

Perform calculations for product and sum when button is clicked

I received the following task for an assignment: Develop 3 functions along with a form. The first function should execute upon button press and utilize the other 2 functions. These two functions are supposed to compute the sum of two numbers and the ...

javascripthtml

What is the functionality of background attachment fixed?

I am curious about how background images behave when the background-attachment property is set to fixed. Here are my questions: If I set a background image for a div with dimensions of 500px by 500px and add a 1px solid red border, then apply backgro ...

htmlcss

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

javascripthtmlalpine.js

Softening the edges of a table

Could you assist me in rounding the corners of my table? I attempted using the basic border-radius, however, it only separated the border at the corners. Do you think this issue is due to my browser (Firefox) or could it be a bug? You can view my Jsfiddl ...

htmlcsscss-tables

Tips for centering text on a webpage using the div element in HTML

I need help aligning the text "Monitoring Engineering Dashboard" to the right side of the image in the top-left corner. Currently, it is positioned below the image (Refer to the image below) <div style="width:1200px; margin:0 auto ...

htmlcsstext-align

Creating a contact form in WordPress that triggers a separate PHP file

I've been working on integrating a small contact form into the sidebar of my WordPress site. After moving the code from its original HTML file to the appropriate WordPress PHP files, everything seems to be functioning correctly except for the contact ...

phphtmlwordpressforms

Issue with Jquery addClass method in Firefox

I am encountering an issue with the jQuery addClass() function in Firefox where the class is not being added to the current element. Interestingly, this code works perfectly in Chrome and Safari (IE has not been tested). Here is the CSS snippet : $(doc ...

jquerycssfirefox

Mistakes found in the 'com/badlogic/gdx/backends/gwt/GwtApplication.java file while working on an HTML 5 project

Just recently, I discovered the amazing framework known as Libgdx. As a newcomer to this framework, I am encountering a few challenges. After cloning the entire repository and running the gdx-setup-ui.jar file, I obtained 4 basic starter projects (my-gdx-g ...

htmlgwtlibgdx

Dynamic image uploading with Ajax

One issue I've encountered is with the ajax image upload feature on my form. It uploads the image when triggered by the onChange event for the file input, but then it uploads again when submitting the form. Is there a way to prevent this duplicate upl ...

phpjqueryhtmlajaxupload

Update the class of pagination to "active" using jQuery

I need assistance with pagination. Here's the code I have so far: <?php for($i = 1; $i<=10; $i++){ ?> <a class="pagenumber" href="?p=<?php echo $i; ?>"><?php echo $i; ?></a> <?php } ?> What I want to d ...

phphtml

What are the best methods for utilizing scrollbars to navigate a virtual canvas?

I am interested in developing a unique jQuery plugin that can simulate a virtual HTML5 Canvas, where the canvas is not physically larger than its appearance on the page. However, the content intended for display on the canvas may be much larger and will ne ...

javascriptjqueryhtmlcanvas

Click on the anchor tag to reveal additional content beyond the default display

This question stems from a previous discussion on the topic at: Only show specific div with anchor In my profiles.html page, there are profiles of around 20 people all grouped under a class named "profile" and unique ids such as "example-name1", "example ...

jqueryhtml

Filling an HTML template with an $http response in VueJS

After learning about VueJs, I decided to embark on a small project - a nutrition app where food recommendations are made based on specific nutrients. Below is the JavaScript code snippet: recommendFood: function() { this.recs = {}; ...

javascripthtmlhttppromisevue.js

Disorganized eCommerce Fee Box tabs causing confusion

I'm struggling to understand why this feature isn't working correctly on my website. It's supposed to generate a box with text and fee information, utilizing custom product fields for the fees. However, the tabs seem to be missing and the ta ...

jqueryhtmlbigcommerce

Utilizing Bootstrap 4 to ensure the final DIV is vertically stacked and fills the remaining space in the container

Having trouble creating a responsive layout using Bootstrap 4? Specifically, when two divs wrap vertically on smaller devices, the top div pushes the lower div down, exceeding the parent container. I want the lower div to fit within the container. How can ...

htmlcssbootstrap-4