[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

small icons

I have several textboxes that I would like to place edit,save,cancel icons.
What is the best way to handle and position these icons. I'm trying to split the cells (into smaller TDs) but I think there is a better way to do it. Also Id like the icons to be small. The ones I saw were still not the size that fit well.
Thanks
0
zachvaldez
Asked:
zachvaldez
  • 5
  • 3
1 Solution
 
LZ1Commented:
Textboxes meaning inputs? If so, then your best bet would be to use background images and assign them using CSS.

You'll have to get the icons the size you want though in order to fit in the text boxes.

Do you have a sample URL or code we can look at?
0
 
zachvaldezAuthor Commented:
I like the way EE place their icons with description(e.g. delete,edit,...) How was that done?
0
 
LZ1Commented:
Still not seeing where your talking about? EE has tons of icons everywhere.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
zachvaldezAuthor Commented:
when you add a comment ,there are icons below the comment area after clicking submit
0
 
LZ1Commented:
I'm just adding this comment to see what you mean. Give me a few minutes after this comment is posted to see what your talking about.
0
 
LZ1Commented:
Ok, I see what your talking about now.

It's very simple really. Your icon(s) have to be small enough or at least as large as your font-size.  Then you can just place it in a background image and pad it so your text is away from it.

CSS: 
.button.edit span {
    background: url("http://cms.l3.redsrci.com/images/experts-exchange/sprite-ico.png") no-repeat scroll 0 -272px transparent;
}
index....3127000 (line 229)
.button span, button span {
    color: #666666;
    font-weight: normal;
    padding-left: 25px;
    text-shadow: 1px 1px 1px #FFFFFF;
}
HTML: 
<p class="buttons"><a href="/editAnswer.jsp?comid=38326183" class="button edit"><span>Edit Comment</span></a></p>

Open in new window

0
 
zachvaldezAuthor Commented:
the url does not work..
0
 
LZ1Commented:
It was meant to show you an example of how to do it. You would replace that code with your HTML.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now