Here's one way to go:
<a href="#" style="position:relative;padding-left:20px;">
<span class="ui-icon ui-icon-pencil"
style="position:absolute;top:50%;margin-top:-8px"></span>Edit
</a>
You can see an example of this is the same index.html:
<style type="text/css">
...
#dialog_link {
padding:0.4em 1em 0.4em 20px;
position:relative;
text-decoration:none;
}
...
#dialog_link span.ui-icon {
left:0.2em;
margin:-8px 5px 0 0;
position:absolute;
top:50%;
}
...
</style>
...
<a class="ui-state-default ui-corner-all" id="dialog_link" href="#"><span
class="ui-icon ui-icon-newwin"/>Open Dialog</a>
- Richard
On Thu, May 14, 2009 at 12:37 AM, THank U <[email protected]> wrote:
>
> Hello,
>
> I want to have an icon linked with text next to it, seams simple but
> can't figure it out???
>
> If you take the index.html page in the example:
> /js/jquery.ui.1.7.1/index.html
>
> and add the following to the page:
> <a href="#"><span class="ui-icon ui-icon-pencil"></span>Edit</a>
>
> You get the icon pencil a line break then the text.
>
> using this code:
> <a href="#"><span class="ui-icon ui-icon-pencil">Edit</span></a>
>
> you get the icon pencil and no visible text...
>
> So what is the proper way to have linked text with an icon on the left
> side of the text?
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
