Repository: syncthing/syncthing (language: go)

Issue:
Newly added "connection type" icon and text in device info is slightly misaligned
This has been added recently in https://github.com/syncthing/syncthing/commit/fd0a6225aadce9cee19ab058465fa5c8658f0be9. The problem is that the icon doesn't come from Fork Awesome but from Bootstrap. Because of this, it's got different dimensions, which makes it narrower than the other icons that come from Fork Awesome.

![image](https://user-images.githubusercontent.com/5626656/194659766-cffc6209-b547-4628-b03d-6ffeebd08726.png)

I can think of two possible fixes for this:

a) Tweak the CSS to make the icon's width identical to Fork Awesome icons. Maybe adding some padding/margin horizontally could fix this?

or

b) Replace the Bootstrap icon in this single instance with the signal icon from Fork Awesome, which uses the same dimensions as all the other currently used icons.


Discussion / hints:
To me it seems like the margin left of the icon is smaller but the distance to the following text is the same. So maybe our CSS somehow sets additional padding / margin on the FA icons, which doesn't get applied to the Bootstrap one?

The question whether Fork Awesome is still needed for licensing reasons was raised previously. If not, it might be best switching back to Font Awesome and use their icons consistently. Does anybody know more about the licensing concerns? 
>  Fork Awesome is still needed for licensing reasons

They have near identical licenses?

https://fontawesome.com/license/free vs https://forkaweso.me/Fork-Awesome/license/

The only difference is CC BY 3.0 vs CC BY 4.0
I think the license that applies to our use case is actually

>Fonts - SIL OFL 1.1 License
In the Font Awesome Free download, the [SIL OFL license](https://scripts.sil.org/OFL) applies to all icons packaged as web and desktop font files.

as our icons are technically fonts. We could of course replace everything with SVG images instead (which is better for accessibility, but it would also require quite a lot of work).
I don't know, if it makes a difference in license, but using the JS Version of Font-Awesome doesn't require any Fonts (just 1 js-File needed, nothing else) and it will replace the `<i>` -Tags with the corresponding SVG-Code automatically.  
Placing
```html
<script>
    FontAwesomeConfig = {
        autoReplaceSvg: 'nest'
    };
</script>
```
before the Font-Awesome-Script, the `<i>`-Tags won't be replaced, but the SVG-Code will be placed inside them, so the CSS-Selectors still work and most of the custom styling could still work.
It's about source code: Font awesome is only available in compiled form, build tools arent' open source. So for a strict definition of open source, it isn't - users don't have a means to modify it at will (as they can't compile modifications). That's an issue for debian, not sure if also for fedora or f-droid. So not an issue for our own builds/release, but at least for a small fraction of users it would be (according to usage reporting ~3%). Personally as long as we don't have a strong reason to, I'd rather not move to font awesome (just my personal opinion).  
Original ticket about fork/font awesome: https://github.com/syncthing/syncthing/issues/5236
Maybe bootstrap icons is the better set, if we were going to switch to anything. (If it's open source enough, I didn't investigate beyond seeing "open source" in the page title.)

Fix patch:
diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index 8ddecc54b09..3c43d83437d 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -171,6 +171,9 @@ table.table-auto td {
     display: inline-block;
     vertical-align: -10%;
     background-size: contain;
+    /* Simulate same width as Fork Awesome icons. */
+    margin-left: .14285715em;
+    margin-right: .14285715em;
 }
 
 .remote-devices-panel {


Test patch: