Font-awesome: Square backgrounds without rounded edges

[trixx-d]

Would it be possible to have an option to add square backgrounds without the rounded edges?

In particular, the social media brand icons.(eg. fa-facebook-square or fa-twitter-square)

Font Awesome is a great icon set, but when working on a site that doesn't employ rounded edges in its design, the rounded edges on the icons just seem too out of place.

[tagliala]

you could implement this with plain css, take a look at this fiddle: http://jsfiddle.net/tagliala/77re29ct/8/

[trixx-d]

Ok, that makes sense. I just have one question relating to how you've done it (& it is probably a silly question too).

How do I convert px to ems for the properties top:, bottom:, left:, right: if they are set to auto or 0px in the parent element?

Reason I'm asking is to keep the icons in the right position within the square background but also make them scalable.

[photodude]

:+1:

[hpvd]

would also vote for having a simple square without rounded edges,
as background basis for combination (stacking) with all the other great icons on all websites with non rounded edges.

Would be best for simple programming and browser compatibility

+1

[hpvd]

this may suit some use cases (smaller round radii) http://fontawesome.io/icon/stop/

[howellbox]

One quick way to square it off: add a class to the stack container span with a background-color to match the container color. Demo on jsfiddle...

[frostbitten]

Working from the example provided by @howellbox , here's (yet) another example with some further simplification https://jsfiddle.net/3h43y147/10/
Relies on fa-stack for centering.

[robwent]

Is it possible to use css when you want to have square corners but with the transparent icon?

Eg, social icons with square corners but the facebook/twitter part is transparent so you can see the image behind them?

[simplyniceweb]

@tagliala would it be possible for angle-right? no rounded edge? with no background just transparent.

[tagliala]

@simplyniceweb It is possible, but sharp edges do not fit our design

Since a request for angle-right-sharp would include at least 24 new icons, it is also our contributing guidelines for requests

if you are a Font Awesome Pro backer, you can request such a set in the Font Awesome Pro repository at https://github.com/FortAwesome/Font-Awesome-Pro

If you are a Font Awesome Pro backer and you don't have access to the above repository, please make sure you have linked your Font Awesome Account to your GitHub account at https://fontawesome.com/account/services

So... If you need icons with sharp edges, please consider another icon set

---

Quick update on this issue

We have a full-square icon and some features of the SVG Framework will allow to implement the icons requested here, with transparency.

Demo: https://jsfiddle.net/tagliala/L17f528g/14/

Ref:

https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms
https://fontawesome.com/how-to-use/on-the-web/styling/masking
https://fontawesome.com/how-to-use/on-the-web/styling/layering

I'm going to close here