Question

   l(t('Edit'), 'node/' . $node->nid . '/webform/components/' . $cid, array('query' => drupal_get_destination())),

I’d like to be able to replace the word “Edit” with an image instead, however when I put an image src in there it shows up as text. Is there a different function I should be using?

I’m using Drupal as my framework.

Thanks ffrom a noob.

Answer 1

That button should have its own class, for example, action_button or an id such as edit_button. Now use CSS to hide the text and use a background image in its place as shown below:

.action_button, #edit_button {

  /* Hide Text */
  text-indent: -9999px;

  display: block;
  background: url('edit_button.png') no-repeat;

  /* Set width and height equal to the size of your image */
  width: 20px;
  height: 20px;
}

EDIT 1:

Change your code with below and use above CSS:

l(t('Edit'), 'node/'.$node->nid.'/webform/components/'.$cid, array('attributes' => array('id' => array('edit_button')), 'query' => drupal_get_destination()));

---

EDIT 2 [FINAL]:

Passing html as TRUE to array parameter of l() method can make us able to use first parameter as img tag instead of just text for display as link:

l('<img src="edit_button.png" alt="Edit" />', 'node/'.$node->nid.'/webform/components/'.$cid, array('query' => drupal_get_destination(), 'html' => 'TRUE'));