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

Transform Array into an unordered list with list items

Currently, I am dealing with a file that contains strings of file paths in the following format: ./CatDV/S1/SFX/steam/6004_90_04 LargeHeadlightSm.wav ./CatDV/S1/SFX/steam/AirHissPressureRe HIT032001.wav ./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit(1).wav ...

phphtmlarraysmultidimensional-arrayhtml-lists

Using the viewport meta tag in HTML and CSS within Laravel's Blade template while also

Greetings everyone! I have a question regarding Blade Laravel: Can we add a condition to the meta name="viewport" content="width=device-width, initial-scale=0.4"? I want the scale to start at 0.4 for smartphones and at 0.6 for tablets. ...

htmlcsslaravel

Creating a series of menu image buttons with rollover effects using HTML and CSS

I am facing an issue with my navigation bar. I have 5 horizontally aligned .png buttons that I want to add rollover effects to using CSS, not Java. After trying multiple solutions, I still can't seem to get it right. None of the methods I attempted w ...

htmlcss

Is there a way to create a footer similar to this one?

I need to create a footer, but I'm struggling with placing a circle at the top half of the footer like this. Even though I can create a footer, I still encounter some issues. This is the code I have right now: .Footer { position: fixed; left: ...

htmlcss

Issue with the table not being displayed when any of the submitted fields are left empty

After submitting the first field, I receive the second value, and after submitting the second field, I get the third value. I have a group of three fields that are interconnected. <?php $courtname=''; if(!empty($_POST['court_ ...

javascriptphphtmlajax

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass

I am having trouble inserting a table from a JSON object into an HTML file

getJSON('http://localhost:63322/logs', function(err, data) { if (err !== null) { alert('Something went wrong: ' + err); } else { //var myObj = JSON.parse(data); // document.getElementById("demo").innerHTML = myObj.ad_soy ...

javascripthtmljson

Is it possible to conduct HTML-based Selenium tests without an internet connection?

As a newcomer to Selenium, I am currently using the Selenium IDE which has led me to create table structures like the one below: <table cellspacing="1" cellpadding="1" border="1" name="SELENIUM-TEST"> <thead> <tr class="title"> ...

htmlseleniumbrowserselenium-webdriveroffline

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

I am encountering an issue where I can click the button, but it requires a refresh to execute the delete action. Is there something in my ajax code causing this problem and why is it refreshing? I want the button to instantly delete without the need for a ...

phphtmlajaxlaraveleloquent

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

javascriptjqueryhtmlcss

Utilize xdebug and NetBeans 8.2 to troubleshoot PHP code submitted through an HTML form

After successfully setting up the XDebug extension to debug PHP code within NetBeans IDE (ver. 8.2), I encountered an issue. While debugging works fine when setting a breakpoint and running the script in debug mode, I am having trouble debugging PHP code t ...

phphtmldebuggingnetbeans

Get the page downloaded before displaying or animating the content

Is there a method to make a browser pause and wait for all the content of a page to finish downloading before displaying anything? My webpage has several CSS3 animations, but when it is first loaded, the animations appear choppy and distorted because the ...

javascriptjqueryhtmlanimationbrowser

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

javascriptjqueryhtmlcss

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

javascripthtmlnode.jsexpress

Confirmation of numerous checkbox selections

I am facing a challenge with a form that contains multiple questions answered through checkboxes. I need to validate that at least one checkbox is selected in all the questions, otherwise an alert message should pop up. Is it possible to achieve this val ...

javascriptjqueryhtml

Step-by-step guide on utilizing the .change method in order to deactivate a

Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...

javascripthtml

What is the best method to generate a distinct identifier for individual input fields using either JavaScript or jQuery?

I have attempted to copy the table n number of times using a for loop. Unfortunately, the for loop seems to only work on the first iteration. I am aware that this is due to not having unique IDs assigned to each table. As a beginner, I am unsure how to cre ...

javascriptjqueryhtml

I am attempting to properly arrange my navigation links and logo in alignment

I need help aligning the logo in the exact center while keeping the navigation links as they are. Here is how it currently looks: https://i.stack.imgur.com/qOgVJ.jpg My CSS: .logo { display: inline-block; text-align: center; } na ...

htmlcss

Embed the WordPress header file outside of the WordPress platform

Recently diving into the world of WordPress, I am eager to integrate the WordPress header file into my PHP file in order to display the identical header as seen on the WordPress site. I am exploring potential methods to achieve this as I work on creating ...

phphtmlcss

Error: ajax is not defined and needs to be declared (repeated twice)

Currently, I have a form that requires processing using Ajax. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <div class="column1"> <form class="form box" action="javascript:networkCheck();" ...

javascriptphpjqueryhtmlajax