search

chrisblakley / Nebula

Nebula is a WordPress theme framework that focuses on enhancing development. The core features of Nebula make it a powerful tool for designing, developing, and analyzing WordPress websites consistently, yet its deliberately uncomplicated code syntax also serves as a learning resource for programmers themselves.
https://nebula.gearside.com
GNU General Public License v2.0
141 stars 36 forks source link

Helper class to make any svg file act like a Font Awesome icon #1982

Closed chrisblakley closed 4 years ago

chrisblakley commented 4 years ago

Consider a helper class in Nebula that allows any svg image to be manipulated like a Font Awesome icon. Could include documentation of how the end-developer would handle that.

chrisblakley commented 4 years ago

Maybe something like this?

<i class="fa nebula-fa" data-src="/whatever.svg"></i>
chrisblakley commented 4 years ago

Here's what I ended up with. Simply add the classes fa and nebula-fa to an <img> tag to make it behave like a Font Awesome icon.

.nebula-fa {text-align: center; width: 1.25em; vertical-align: text-bottom;} //Make an img tag behave similar to a Font Awesome icon
<img class="fa nebula-fa" src="phg-symbol.svg" />

Screen Shot 2020-02-29 at 12 09 14 AM

chrisblakley commented 4 years ago

These even work well with Font Awesome modifiers like fa-spin. Mileage may vary with other modifiers– the main point of this was to be convenient for custom icon consistency.

Screen Shot 2020-02-29 at 12 12 34 AM