Icons for set operations, depicted as Venn diagrams
As there seems to be no free pack of icons for set operations, I have created my own. However, be warned that I am an amateur in this "icon creation" business and these icons have been created to be used for another project of my own.
To install the fonts of this project, download this repository and go to the fonts folder. Here, you can find the files needed to install the fonts to your computer.
If you do not know which file format is the most appropriate for you, just install the set-operations.ttf.
Download this repository and copy the set-operations folder into your project. In the head of your HTML file, link to the set-operations.css file as such:
<link rel="stylesheet" href="path/to/set-operations/css/set-operations.css">Next, to place an icon somewhere in your HTML file, use the prefix set and the icon name. For instance, to use the union icon:
<span class="set set-union"></span>The following icon names are available:
unionintersectdifferencecomplement: complement of one groupcomplement-AB: complement of two united groupsdifference-AB: subtract group B elements from group Adifference-BA: subtract group A elements from group Bsymmetric-differenceempty
If you prefer the groups to be identified by the letters A and B, you can add the suffix id to the icon name:
<span class="set set-union-id"></span>You may also desire to change the icon style to improve their position according to the remaining text, as such:
<span class="set set-intersect" style="font-size: 20px; line-height: 0; vertical-align: bottom; display: inline-block;"></span> Intersect groupsThe icons are based on the circle-thin icon available from Font Awesome. After creating the intended SVG files to represent set operations, Glyphter was used to convert those files into fonts.
As the icons are based on Font Awesome, all the same licenses apply.
- Font license: SIL OFL 1.1
- CSS license: MIT License