Font-awesome: Icon Request: split icon-signal into icon-signal-[1..5]

[eins78]

With the new icon stacking feature some of the icons could be revisited to have optional versions with their single components.

A simple example is signal-icon, which could have 5 single icons with 1 bar each.

I made a quick and dirty version with IcoMoon, but did not find any info on how to contribute icons. Besides, it is quick and easy to do.

Example code:

  <span class="icon-stack icon-4x">
    <i class="icon-check-empty icon-stack-base"></i>
    <i class="icon-signal-1"></i>
    <i class="icon-signal-2"></i>
    <i class="icon-signal-3"></i>
  </span>
  icon-signal-[1..3] on icon-sign-blank<br>

  <span class="icon-stack icon-4x">
    <i class="icon-sign-blank icon-stack-base" style="color:#ddd"></i>
    <i class="icon-signal-1"></i>
    <i class="icon-signal-2"></i>
    <i class="icon-signal-3"></i>
    <i class="icon-signal-4 icon-light"></i>
    <i class="icon-signal-5 icon-light"></i>
  </span>
  icon-signal-[1..5] on icon-sign-blank<br>

  <span class="icon-stack icon-4x">
    <i class="icon-sign-blank icon-stack-base" style="color:#ddd"></i>
    <i class="icon-signal-1" style="color:blue"></i>
    <i class="icon-signal-2" style="color:cyan"></i>
    <i class="icon-signal-3" style="color:red"></i>
    <i class="icon-signal-4" style="color:orange"></i>
    <i class="icon-signal-5" style="color:yellow"></i>
  </span>
  icon-signal-[1..5] on icon-sign-blank<br>

Example output:

[r0mk1n]

+1
this would be great

[diegoviola1]

+1 this would be awesome!

[ewildgoose]

+1

[derekstavis]

This is a must!! :+1:

[mpalere]

+1

Was there any eventual resolution on this?

[luk156]

+1

[patelrit]

+1

[ntvsx193]

+1

[NaWer]

+1

[xaume]

+1

[jgornick]

Instead of stacking, it could follow the battery-X pattern:

signal-1
signal-2
signal-3
signal-4
signal-5

[jgornick]

@tagliala or @davegandy With the ability to stack, what would be the preferred approach for something like signal level?

Would it be like #437? Depending on the approach, it may be useful to flag #437 or this issue (#1870) as a duplicate of the other.

[jgornick]

This same pattern could also be applied to the fa-wifi icon (#7856).

[cnelissen]

+1 for following the same battery-(1-5) pattern. This would be tremendously useful.

[maisnamraju]

+1

[humancopy]

+1 for battery pattern

[lgm42]

+1

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-193215139

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-143229545

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-128319765

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-110569718

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-73920140

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-54964045

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-46556663

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-43627712

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-37681842

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-33077263

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-29408690

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issuecomment-24018264

[tagliala]

+1 https://github.com/FortAwesome/Font-Awesome/issues/437#issue-6581752

[betaver]

+1

[MrEcho]

+1 please

[Argun]

+1

[jvvosantos]

+1

[ashishtilara]

+1

[khashabawy]

+1

[kayleighbray]

+1

[LongPotato]

+1

[JordanDalton]

+1

[amitnabarro]

+1

[pepitooo]

As I needed it quickly, I did a ugly workaround, but work for me https://jsfiddle.net/sksxfbk2/
I'm not a web designer, so I hope it will for for you as well

[JTrotta]

+1

[ektidey]

+1

[Hossrod]

+1, especially if following the battery-X pattern someone mentioned above:

signal-1
signal-2
signal-3
signal-4
signal-5

[HamOnBry]

+1

[zacwitte]

+1

[thegruffalo]

+1

[rotsix]

+1 !

[akosphp]

+1

[tadly]

another big +1 for following the battery-x pattern

signal-1
signal-2
signal-3
signal-4
signal-5

[commandocoding]

+1

[billop]

+1

[ahmadsyamim]

+1

[kgillespieatmosphere]

+1

[aenany-atmosphereiot]

+1

[dcousens]

+1

[DavidBerquist]

+1

[drmikecrowe]

+1

Expanded on @pepitooo hack -- https://jsfiddle.net/b649Lrct/ -- pure CSS solution

[danield137]

+1

[gabrielpaim]

+1

[FlorianFranzen]

To quote the readme:

At the moment we are not accepting pull requests containing icons

So what else can I do, to make this happen? I feel like it should be trivial to add these alternations if they are based on the signal or wifi icon and there is plenty of good reason to add them.

[raomin]

+1 for signal-X

Until it's done, I truncate the icon where I need, to show the number of bars I want, like this:

#one bar:
                    <i class="fa fa-signal" style="overflow:hidden; width:0.2em"></i>
#two bars:
                    <i class="fa fa-signal" style="overflow:hidden; width:0.4em"></i>
#three bars:
                    <i class="fa fa-signal" style="overflow:hidden; width:0.6em"></i>
etc.

You can also stack a grayish full icon under:

<span class="fa-stack fa-lg">
<i class="fa fa-signal fa-stack-1x" style="opacity:.3"></i>
<i class="fa fa-signal fa-stack-1x" style="overflow:hidden; width:0.8em; margin-left:0.5em;"></i>
</span>

[azz0r]

+1

[bchecketts]

+1

[gb78]

+1 , would be a +2 if possible ;)

I was surprised by not finding this already, I am currently developing a series of IoT monitors with a web interface, and along the sensors data there is also the need to log both battery and wifi status.

[zkhil1]

+1

[bchoubert]

+1, still waiting for this

[plie]

+1
I can use this right now in my new app. This would be great.
Thank you!

[rudevdr]

+1

[walter-tavares]

Yes, please add this icon.

+1

[FellipeBr]

+1

[greenmr]

4 1/2 years later and still no action on this? IoT is HUGE now and these signal level icons are needed for nearly every project. Couldn't find even one icon font library containing these indispensable glyphs so I guess I'll be dusting off Adobe Illustrator and making my own.

[MrEcho]

It does seem like its some sort of sick joke now...

[greenmr]

In the next day or so I'll be posting a full set of wifi signal quality and encryption svgs and icon fonts I just created for my own projects. Couldn't find anything anywhere on the web so I built my own in Illustrator. Stay tuned.

[greenmr]

Ok, for those who are interested, here is a set of wifi signal quality and auth mode icons and fonts you can use free of charge in your projects. I am including both the generated fonts and the svg files used to create them, but not my Illustrator .ai files...

The svg icons:
wifi-quality-svg.zip

The "bars" font:
wifi-quality-bars.zip

The "waves" font:
wifi-quality-waves.zip

Both icon styles combined:
wifi-quality-full.zip

Check the "Read Me.txt" file in the font zips for instructions. License info is in all four of the zip files.

The font files are not large, but for IoT you may find them too big for storage on your device flash. If so, I recommend you build your own minimal font with just the icons you use from the svg icons at icomoon.

Hopefully FontAwesome will add something similar soon and these won't be needed for long.

[Fluepke]

+1 would be nice to use in IoT applications, i3pystatus and NetworkManager CLI

[roskelld]

This would be great. Maybe my post will achieve full signal strength and make it happen.

[shaimr]

+1

[adammatlack]

come on... it has been a year. Do the FA guys even care about clear offerings that are missed by their suite?

[sensibleworld]

https://fontawesome.com/icons?d=gallery&q=signal&v=5.3.0,5.3.1

[mbates14]

What makes this even worse, its "pro" only. WTF Thats pretty much hanging a steak in front of you and saying here doggy. Ugh. No wonder piracy exists.

[Baitinq]

Indeed

[tagliala]

@mbates14 I'm going to remove your comment, because it is against our community guidelines and code of conduct

Please take a look at our Icon Leaderboard FAQs, they contain a lot of information on how requests work

Also, signal 1-5 are implementable with the SVG Framework and Font Awesome 5 Free

Here it is an example: https://jsfiddle.net/tagliala/L17f528g/147/

[mbates14]

Wow, that only took several months to get recognized. Anyways.

I look at your link, its all in javascript and I dont see the font codes or declares? I am using it in an App. as an Otf/TTF file.