How to add image to pagination buttons in Code Igniter - php

Question

$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" style="border-radius:5px;">';
$config['prev_tag_close']='</button>';
This is the code in the controller. Now, I would like to add an image to this button, how do I do it? if I use an tag with source set to base_url('path/to/file.png') am getting just an empty square with white border around it. any ideas please and thank you?

Answer 1

Put the buttons inside a container (let div) and named with a ID say
<div id="pagin">
<button>1</button>
<button>2</button>
..................
..................
<button>10</button>
</div>
Now just use this bellow script.
<script>
var img = <?= base_url('path/to/file.png'); ?>
$('#pagin button').html('<img src="+img+" alt="image alt text">');
// This will display the image on every button
$('#pagin button:first-child').html('<img src="+img+" alt="image alt text">');
// This will display the image only on the first button
$('#pagin button:last-child').html('<img src="+img+" alt="image alt text">');
// This will display the image only on the last button
$('#pagin button:nth-child(2)').html('<img src="+img+" alt="image alt text">');
// This will display the image only on the 2nd button
</script>

Answer 2

You can do this with CSS like this :
As you are already using inline css you can do this
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" style="border-radius:5px;background-image: url("yourimage.png");">';
$config['prev_tag_close']='</button>';
However i would suggest adding a new class and giving css property to that class.
$config['prev_link']='Previous';
$config['prev_tag_open']='<button type="button" class="pg-prev">';
$config['prev_tag_close']='</button>';
CSS FILE
.pg-prev{
border-radius:5px;
background-image: url("yourimage.png");
}

Answer 3

It's okay, I found a way:
$config['next_link']='Next<img src="'.base_url("/resources/images/next.png").'" width=20; height=20; style="vertical-align: middle; margin-left: 5px;"/>';
This works perfect, thank you guys for your interest.