Is it possible to use custom icons for search options?


#1

I’m working on a new UI theme for Atom. When I designed it, I created custom icons for the search options, e.g. use regex, case sensitive, etc. However, after inspecting the markup, it appears this can’t currently be done without altering the markup. Is there a CSS technique I’m forgetting, or is this by design? Anyone else have thoughts on this or am I the only one trying to do this?


#2

What format are your custom icons in? (e.g. a font, a series of svg files, sprites, a series of png files)

If they’re a font, you could always use ::before or ::after pseudo-elements and include the icon in content.


#3

I’m using an icon font. I know I could insert content in pseudo-elements, but how would I then approach covering or removing the content in the element, e.g. the .* for Use Regex?


#4

Maybe make the font-size of the button 0 and then add it back on the pseudo element?

.find-and-replace .btn-group-options.btn-group .btn.btn {
  font-size: 0;
}

.find-and-replace .btn-group-options .btn:before {
  font-size: 16px;
}

.find-and-replace .btn-group-options .btn:nth-child(1):before {
  content: "✈";
}

I think I saw an issue about replacing the text with real icons. Would be good to change it for all themes. Then you could just change the content: ""; part.


#5

Thanks! I didn’t think of doing it that way. Just tried it and it worked for the most part. Some funky alignment issues to fix, but the icons are displaying so the hard part is over. :smile:

Cool! I’d love to see this changed. I’ll check the repo for that issue after lunch. Thanks again for the tips!