Font-awesome: Icon request: Venn diagrams
Venn diagrams are excellent for explaining things that have to do with sets. I recently needed it when explaining what "AND, OR, NOT" meant in a query language.
I'm certainly no artist, but here's a quick illustration:
Ahnfelt
All 35 comments
+1
luto
on 23 Oct 2013
Yes please, I'd love a 3 circle venn outline too. Really useful! Thanks :)
unfolddigital
on 8 Apr 2014
+1
mweint
on 6 May 2014
+1
Also +1 for unfolddigitals suggestion of 3 circle outline (in triangular formation). My use case would be to signify geographical regions.
Please :)
MCD666
on 2 Sep 2014
Sugestions for names:
fa-set-intersection
fa-set-difference
+1
I could use something like this as well.
bertomaniac
on 8 Jan 2015
+1
vol7ron
on 6 Mar 2015
+1
vlipman
on 13 Mar 2015
+1
greggoodman
on 7 May 2015
+1
MarcosMeli
on 6 Jul 2015
+1
even though a venn diagram with three circles would be awesome
tianmarin
on 18 Aug 2015
+1
Particularly the intersection but ideally all three.
destaids
on 23 Dec 2015
+1
These would be extremely useful for query builder interfaces
daedalus28
on 11 Mar 2016
I didn't mention it, but a venn diagram is also a universal symbol for _comparison_ or _compare and contrast_. Is font awesome moving slow on adoption, or have they made any of our requests?
vol7ron
on 11 Mar 2016
+1
SuperAtic
on 11 Mar 2016
+1
Aliuken
on 21 Mar 2016
+1
diegopiacc
on 22 Mar 2016
+1
nuno-agostinho
on 24 Mar 2016
+1
sam-aiq
on 11 Apr 2016
+1
ebaronov
on 11 Apr 2016
+1
Theriault
on 20 Jun 2016
+1
Salvar
on 21 Dec 2016
+1
elliotb
on 12 Jan 2017
+1
qwertyLabGmbH
on 23 Apr 2017
+1
princeofnaxos
on 1 Jun 2017
OMG, this request was made in Oct 2013!!! C'mon, FA, it's about time to comment on it!
princeofnaxos
on 1 Jun 2017
+1
zer0pants
on 6 Sep 2017
+1
SmoooZ
on 1 Nov 2017
+1
aschaetz
on 9 Nov 2017
Hi All,
Just a note in the meantime.
You can create simple Venn diagrams (not quite as the ones shown) using a combination of fa-circles, fa-layers and fa-transform.
The great thing about doing it this way, is you can change how big each of the circles are and where they are using the right- and shrink- attributes.
Hope this helps someone! :)
I'm a newby to GitHub, but hopefully my code below comes through (and you can see past the inline styling).
AdrianApexsheep
on 22 Mar 2018
Workaround until these land, you can create square based ones using transforms/layers. This issue is duplicated by https://github.com/FortAwesome/Font-Awesome/issues/11196 which also includes symmetric difference.
<div class="fa-3x">
<!-- intersection: A ∩ B -->
<div class="fa-layers fa-fw">
<span class="far fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="far fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-10"></span>
</div>
<!-- symmetric difference: A â–³ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square fa-inverse" data-fa-transform="shrink-11"></span>
<span class="far fa-square" data-fa-transform="shrink-10"></span>
</div>
<!-- union: A ∪ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-10"></span>
</div>
<!-- difference: A ∖ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="far fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square fa-inverse" data-fa-transform="shrink-12"></span>
<span class="far fa-square" data-fa-transform="shrink-10"></span>
</div>
</div>
@Theriault thanks!
tagliala
on 13 Mar 2019
Expanding on @Theriault's beautiful example, I've performed something similar for cirlces, though it requires a little more transformations to accommodate the oblong intersections. There's also opportunity for someone to improve it to be even more exact.
https://jsfiddle.net/vol7ron/jevn851x/
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
<style>
.stretch-y {
transform: scale(1, 1.5);
}
.stretch-rotate {
transform: rotate(45deg) scale(1,1.5);
}
</style>
<!-- Square -->
<div class="fa-3x">
<!-- intersection: A ∩ B -->
<div class="fa-layers fa-fw">
<span class="far fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="far fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-10"></span>
</div>
<!-- symmetric difference: A â–³ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square fa-inverse" data-fa-transform="shrink-11"></span>
<span class="far fa-square" data-fa-transform="shrink-10"></span>
</div>
<!-- union: A ∪ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square" data-fa-transform="shrink-10"></span>
</div>
<!-- difference: A ∖ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-square" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="far fa-square" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-square fa-inverse" data-fa-transform="shrink-12"></span>
<span class="far fa-square" data-fa-transform="shrink-10"></span>
</div>
</div>
<!-- Horizontal Circles -->
<div class="fa-3x">
<!-- intersection: A ∩ B -->
<div class="fa-layers fa-fw">
<span class="far fa-circle" data-fa-transform="shrink-6 left-2"></span>
<span class="far fa-circle" data-fa-transform="shrink-6 right-2"></span>
<span class="fas fa-circle stretch-y" data-fa-transform="shrink-10"></span>
</div>
<!-- symmetric difference: A â–³ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-circle" data-fa-transform="shrink-6 left-2"></span>
<span class="fas fa-circle" data-fa-transform="shrink-6 right-2"></span>
<span class="fas fa-circle fa-inverse stretch-y" data-fa-transform="shrink-11"></span>
<span class="far fa-circle stretch-y" data-fa-transform="shrink-10"></span>
</div>
<!-- union: A ∪ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-circle" data-fa-transform="shrink-6 left-2"></span>
<span class="fas fa-circle" data-fa-transform="shrink-6 right-2"></span>
<span class="fas fa-circle fa-inverse stretch-y" data-fa-transform="shrink-10"></span>
<span class="fas fa-circle stretch-y" data-fa-transform="shrink-11"></span>
</div>
<!-- difference: A ∖ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-circle" data-fa-transform="shrink-6 left-2"></span>
<span class="far fa-circle" data-fa-transform="shrink-6 right-2"></span>
<span class="fas fa-circle fa-inverse stretch-y" data-fa-transform="shrink-11"></span>
<span class="far fa-circle stretch-y" data-fa-transform="shrink-10"></span>
</div>
</div>
<div class="fa-3x">
<!-- intersection: A ∩ B -->
<div class="fa-layers fa-fw">
<span class="far fa-circle" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="far fa-circle" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-circle stretch-rotate" data-fa-transform="shrink-10 rotate-45"></span>
</div>
<!-- symmetric difference: A â–³ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-circle" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="fas fa-circle" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-circle fa-inverse stretch-rotate" data-fa-transform="shrink-11"></span>
<span class="far fa-circle stretch-rotate" data-fa-transform="shrink-10"></span>
</div>
<!-- union: A ∪ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-circle" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="fas fa-circle" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-circle fa-inverse stretch-rotate" data-fa-transform="shrink-10"></span>
<span class="fas fa-circle stretch-rotate" data-fa-transform="shrink-11"></span>
</div>
<!-- difference: A ∖ B -->
<div class="fa-layers fa-fw">
<span class="fas fa-circle" data-fa-transform="shrink-6 left-2 up-2"></span>
<span class="far fa-circle" data-fa-transform="shrink-6 right-2 down-2"></span>
<span class="fas fa-circle fa-inverse stretch-rotate" data-fa-transform="shrink-11"></span>
<span class="far fa-circle stretch-rotate" data-fa-transform="shrink-10"></span>
</div>
</div>
The thing to mention is this requires JavaScript and much more effort than having an already generated image/font, which is still desired for Font Awesome to provide.
vol7ron
on 16 Mar 2019
+1
summer114
on 7 Oct 2020
This is now available as part of the version 6 alpha release: https://fontawesome.com/download
sensibleworld
on 4 Nov 2020
Related issues
vivekagr
·
194Comments
open2
·
178Comments
GabrielDelepine
·
202Comments
jrf0110
·
170Comments
bhubbard
·
169Comments
Most helpful comment
Expanding on @Theriault's beautiful example, I've performed something similar for cirlces, though it requires a little more transformations to accommodate the oblong intersections. There's also opportunity for someone to improve it to be even more exact.
https://jsfiddle.net/vol7ron/jevn851x/
The thing to mention is this requires JavaScript and much more effort than having an already generated image/font, which is still desired for Font Awesome to provide.