CODEWITHSUNDEEP
phphtmlcss
Richa Sharma
Richa Sharma

Reputation: 73

Icon usage in HTML with PHP

I have started learning html and php. I know very little coding of it. I am confused for using png icons in my action buttons. I have currently text button with css. I want use png icons instead that text buttons. I have used it like below

<td>
   <a href="edit_quotes.php?quotes_id=<?php echo $row['id'];?>" class="btn btn-primary">Edit</a>
   <a href="edit_quotes.php?quotes_id=<?php echo $row['id'];?>" class="btn btn-primary">Activate</a>
   <a href="?quotes_id=<?php echo $row['id'];?>" class="btn btn-default" onclick="return confirm('Are you sure you want to delete this quotes?');">Delete</a>
</td>

Now I want use png icons there instead of text. What should I do for it ? I have icons located in directory called icons.

Sorry for my little knowledge.

Thanks

Upvotes: 1

Views: 199

Answers (2)

Nishesh Pratap Singh
Nishesh Pratap Singh

Reputation: 2181

It depends on the structure of your web folder, where icons directory is in your web folder.

If you have icon directory in your root folder and php file is also in root then you can simply use below syntax :

<img src="icon/image_name.jpg" alt="" />

Or you can use complete path for icon folder relative to your website url as shown below :

<img src="http://localhost:8080/websitename/icon/image_name.jpg" alt="" />

Upvotes: 0

Super User
Super User

Reputation: 9642

You can add icon as image in your code, check below snippet

<td><a href="edit_quotes.php?quotes_id=<?php echo $row['id'];?>" class="btn btn-primary" title="Edit"><img src="https://dummyimage.com/20x20/000/fff.png&text=E" alt="Edit"/></a>
<a href="edit_quotes.php?quotes_id=<?php echo $row['id'];?>" class="btn btn-primary" title="Activate"><img src="https://dummyimage.com/20x20/000/fff.png&text=A" alt="Activate"/></a>
<a href="?quotes_id=<?php echo $row['id'];?>" class="btn btn-default" onclick="return confirm('Are you sure you want to delete this quotes?');" title="Delete"><img src="https://dummyimage.com/20x20/000/fff.png&text=D" alt="Delete"/></a></td>

Upvotes: 2

Related Questions