Pop

Pop comes as a ZIP archive, meaning that you need to extract the Files before using the Software. You get 2 main Files featuring 1 Logo, 6 Preloaders and 18 Icons (or Images) that are embedded into the Msg Workbook - I also include any Files that are loaded into memory as the Base64 data in a TXT File. The first File is the main 'Pop.xlsm' File used to Copy into your Project, or to test and develop as your finished Software. The second File is 'Minified.xlsm' which is a Copy of the main Pop Code Modules whereupon I installed just the 'Camera' Icon - this is ready for deployment - see Copy Pop into an Existing Project

Unzip the Pop.zip File (right-click->Extract Files...). Open Pop.xlsm and your own Macro-enabled Project using the same instance of Excel (I am using a new Project called 'Test.xlsm' for this example). Press ALT+F11 to enter the VBA Editor, Expand all visible Nodes and in the Project Explorer Window, drag the UserForm Code Modules, 'frmLightBox' and 'frmPop' into your Project from the Pop.xlsm Project. Then Drag the 'Pop' and 'mdIcons' Code Modules into your Project (see the image below):

Now you have 2 choices. If you DON'T want to use all of the Icons that came with Pop.xlsm, then you can simply rename 'Sheet1' in the Code Module (or any Sheet) to 'shtPop' and in the 'Pop' Code Module, run the InstallIcons() subroutine to install just the Icons that you want. After this you are good to go!

If you do want to use all of the Icons that came with Pop.xlsm, then select Pop.xlsm and click on the 'Sheet1' Worksheet. Right-click on the 'Sheet1' Tab and choose 'Move or Copy...'. In the 'To Book' Dropdown Combo, select your Project, choose 'Before Sheet' and select the first Sheet Name in your Project. Important! - DO NOT CHECK 'Create a Copy' - you need to 'MOVE' the 'Sheet1' Worksheet otherwise the embedded Icons will not follow the Worksheet. Press the 'OK' Button

That's it, now you can add an Example to one of your Project Code Modules and run a Pop Box - you can also use the InstallIcons() Subroutine to install your own Icons - have fun

1. Pop only uses embedded Base64 Encoded Images that are dynamically extracted from the 'shtPop' Worksheet in the 'Pop.xlsm' Workbook. You can Delete and then Load in any number of Images. You must first Base64 encode the Image String for the images that you require (see some online links below) – you then need to Save these as .TXT Files as per the examples in the download when you purchased Pop

2 links to enable you do this can be found here:
Motobit
Base64Image

2. The Subroutine to Load in your Icons and Preloaders as Base64 encoded data into the 'shtPop' Worksheet can be found in the 'Pop' Code Module. It is called 'InstallIcons' and will allow you to Browse and locate all of your Base64 Images/Preloader Files which must be '.TXT' Files . The Name of the Icon or Preloader is derived from the Filename of your Base64 Encoded Text File ie. 'icoSpanner.txt'

Make a backup of 'Pop'. Ensure that you have saved your Base64 data correctly in Text Files with the Name of the File being the Name of the Icon or Preloader that you want to use ie. 'icoSpanner' for a Spanner Icon Image. Scroll down to the InstallIcons() Subroutine and run this Code - Browse and select your Files to install them. Now you would add the Named Argument including the Name of the Icon like this: 'Icon:=icoSpanner' or Picture:=icoSpanner' etc.

The 2 Text Files as examples can be downloaded below:
icoSearch.txt
ldrCogs.txt

All Pop Boxes have a Placeholder - a chasing ants style line (without the animation - believe me, it's not easy to do in Javascript for IE7, I did try!). This is useful when you begin a new design. To turn the setting on, ensure that you have at least one or more Boxes set to True ie. 'Canvas:=True', 'TitleText:=True' in the Pop.Box() Function and then set 'Placeholders:=True' in the Pop.Init() Subroutine - you will see something like the Image below; and there you have it - no more staring at a Blank Canvas:

And here is an Image displaying all of the available Pop Boxes (it may look a little messy, but you can now differentiate the individual Boxes from one another. The Logo, Icon and Picture Boxes are coloured Red, the Title, Strapline, Message, Buttons, Progress Percentage and Progress Title are coloured turquoise, and the Canvas, Frames and Progressbar is coloured Yellow):

Please Note: the Icons, Images or Preloaders are not displayed because we have not set the Object Names ie. 'Logo:=icoCalendar'. When we do, they will be displayed inside the Placeholders as per the Image below (also note that they will not adhere to any kind of alignment if the area they occupy is smaller than the size of the Image! You can see below that the 'icoSearch' Icon makes a lovely fit because the Icon Placeholder size is larger than the actual Image so it can be centered both Horizontally and Vertically. By the way, the Frame and Buttons have coloured Backgrounds to emphasise the areas they occupy similar to the Buttons

Here is a Screen Shot of me building a 'Msg' emulation Dialog Box using the Placeholders to get my bearings in the design process - they are a great help/guide, I think my favourite bit of the entire Project!:

All of the Pop Boxes have some kind of Horizontal and Vertical alignment to align Icons, Images, Preloaders and Text - they use a 'Fix' specifically designed to work with IE7 and can be set through '(Pop Box Name)-box' and '(Pop Box Name)-psuedo' via the CSS Styles() Function. The Horizontal alignment Parameters are 'left, right, center' and the Vertical alignment Parameters are 'top, middle, bottom'. Here are the default alignments by Pop Box (X, Y):

Logo: Left, Center

Icon: Center, Center

Picture: Center, Center

Title: Left, Center

Strapline: Left, Center

Message: Left, Top

Progress: Title Left, Center

Progress: Percentage Left, Center

Close Button: Center, Center

OK Button: Center, Center

Cancel Button: Center, Center
                            

The Horizontal alignment is set through the CSS Styles() Function like this:

Styles:="'title-box', {'font-family':'Verdana','font-size':'12px','color':'#5E585F','text-align':'left','top':'-8px','left':'30px','width':'340px','padding':'0px','z-index':'99'}"
                            

The Vertical alignment is set through the CSS Styles() Function like this:

Styles:="'title-psuedo', {'vertical-align':'bottom'}"
                            

You can over-ride the fixed alignments by setting the 'position' as 'absolute' and then passing your own alignment Parameters into the JavaScript like this:

Styles:="'title-psuedo', {'position':'absolute','top':'15px','left':'15px','text-align':'left'}"
                            

Please Note: Frame Boxes are the only Pop Boxes that do not use the IE7 fix to try to align both Horizontally and Vertically as they were not designed to hold Text, however should you want to use Text with a Frame Pop Box then you should simply set 'frame1-psuedo' with the required alignment Parameters and pass the text via the CSS PsuedoStyles() Function. Here is how you would do this:

' Pop.Init()
Styles:="'frame1-psuedo', {'top':'4px','left':'12px'}"
PsuedoStyles:="frame1-text|Some Text Value"

' Pop.Box()
Frame1:=True
                            

The Logo (Image/Icon/Animated GIF) is used to display an Image at the top of the Pop Box alongside a Title if required. The Logo has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. The Image Size can be adjusted using the LogoSizePercentage Parameter (default "100%"), for example, 'LogoSizePercentage:="50%"' which would reduce the Image by half. The Logo Box needs to be turned on by setting 'Logo:=True' in the Pop.Box() Function

Please Note: alignment within the Pop Box will only work if the Box is bigger than the Image or Preloader being displayed - also check using 'Placeholders:=True' that the Image or Preloader is within the Canvas area

Title (Text) Box

The Title Text is used to display a Message at the top of the Pop Box to accompany the Logo. The Title has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. A Title Box doesn't need to be turned on in the Pop.Box() Function, simply passing anything other than "" will display the Box ie. 'TitleText:="Configuring Setup"'

Strapline (Text) Box

The Strapline Text is used to display a large heading in order to make a statement that stands out from the main Message or Dialog Title. The Strapline has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. You can have up to 2 lines of short Text - anything else will be cut off completely as the CSS overflow setting is set to 'hidden'. A Strapline Box doesn't need to be turned on in the Pop.Box() Function, simply passing anything other than "" will display the Box ie. 'TitleText:="Configuring Setup"'

Message (Text) Box

The Message Text is used to display a long formatted Message to the user. The Message has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. A Message Box doesn't need to be turned on in the Pop.Box() Function, simply passing anything other than "" will display the Box ie. 'MessageText:="Configuring Setup"'

You can have up to as many lines of Text as you like until it is cut off completely as the CSS overflow setting is set to 'hidden'. You can use any kind of formatted HTML within reason ie. <b>, <u>, <span> etc. - remember to include the closing tags

A Message Box will Scale Fonts with the Scale set for the Dialog or you can over-ride the setting using the CSS Styles() Setting - see Scaling Pop Boxes

Link (Text) Box

The Link Text is used to display a link, text and tooltip in order to provide a means of opening up a WebPage in an IE (Internet Explorer) Web Browser. The Link has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. A Link Box doesn't need to be turned on in the Pop.Box() Function, simply passing anything other than "" will display the Box ie. 'LinkTitle:="www.kubiszyn.co.uk"' and 'Link:="http\://www.kubiszyn.co.uk/|top=10,left=10,width=900,height=680,toolbar=yes,scrollbars=yes,resizable=yes,location=yes"' - both parts need to be passed in order to use the Link Pop Box

You can have multiple links when using Pop but only one Link Box. Links can be either Modal or Non-Modal, meaning that after clicking the link the WebPage opened up in the Browser will allow control back to the Excel Application or wait until the user closes the Browser before returning control. Links can be passed all manner of 'Switches' which are inbuilt as part of the JavaScript Calls to open the Windows - these will be parsed when they are passed into the Pop.Box() Parameters ie. 'scrollbars=yes,location=yes' meaning display the Scrollbars and the Location bar of the Web Browser Control when it is displayed after clicking a link. There is one more alternative method to add a Modal Link - see Psuedo Modal Link

In Summary - Links can be added to a Pop Box Dialog in one of two ways of a combination of both:
1. Use HTML in any of the Text Pop Boxes like TitleText, MessageText or ProgressbarTitleText
2. Use a dedicated Link Box for which you can also set the link 'Rollover' or 'Hover' Colours

Option 1 - Use HTML in any of the Text Pop Boxes like TitleText, MessageText or ProgressbarTitleText (notice the '\' Backslash to comment out all of the Apostrophe's and the use of the 'color' TagName to style the Font Colour):

LinkTitle:="www.kubiszyn.co.uk", _
ProgressbarTitleText:="<a href=\'http://www.kubiszyn.co.uk\' target=\'_blank\' title=\'visit kubiszyn.co.uk from a html link embedded in a pop box\' style=\'color:#518FF5 !important\'>www.kubiszyn.co.uk</a>"						
                            

Option 2 (i) Use a dedicated Link Box for which you can also set the link 'Rollover' or 'Hover' Colours (NON-MODAL):

LinkTitle:="www.kubiszyn.co.uk", _
Link:="http\://www.kubiszyn.co.uk/|top=10,left=10,width=900,height=680,toolbar=yes,scrollbars=yes,resizable=yes,location=yes"						
                            

This is an alternative method of adding a link using Frames and HTML passed in the CSS Psuedo Style() Code

First of all, you need to set 'Pop.OpenWindowSettings' wiith the appropriate settings for when the Browser Window is opened like this:

Pop.OpenWindowSettings "dialogTop:10px;dialogLeft:10px;dialogWidth:900px;dialogHeight:680px;resizable:yes;status:yes;scroll:yes"						
                            

Next you need to pass in the required Parameters for the PsuedoStyles() Function. The first part is 'frame1-text', followed by a '|' Pipe and then the HTML Code which must include a call to 'PsuedoLink()' which is a JavaScript Function:

PsuedoStyles:="frame1-text|<a style='color:#4E485F !important; text-decoration:none' href='#' target='_blank' title='More Info' onclick=""PsuedoLink('http://www.kubiszyn.co.uk/documentation/pop.html'); return false;"">More Info</a>"						
                            

That's it - all being well, you should now have a Modal Browser Window Popup whenever the Dummy Button Text is clicked. Here is a Screen Shot:

Pop can display Hover Buttons and capture their return values. 2 Buttons are available to use in Pop, an 'OK' Button and a 'Cancel' Button. A Button 'Text' has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. A Button needs to be turned on in the Pop.Box() Function ie. 'OKButton:=True' and 'CloseButton:=True'. Buttons use CSS PsuedoStyles() to change things like their Rollover, Rollout Background Colours and Font Colours, plus things like the Titles of the Tooltips when you hover over a Button

Just because the Button has a Name doesn't mean that you cannot use it for a different purpose, ie. you can use the 'OK' Button to have the Text Cancel and capture the return result. The 'OK' Button will always return 'vbYes' whereas the 'Cancel' Button will always return 'vbNo' and the Close Cross Click will always return 'vbCancel'. The default is set to be 'vbCancel' if you capture the result via a Lightbox Click. However if someone presses the 'Escape' Key you can check for 'vbAbort'

Buttons can have a 'Flat' look and feel about them by just using a Backgroound Colour or they can have cool 3D Borders effects applied ie. 'Ridge', 'Inset', 'Outset', Groove'. Here is a Pop Box with a nice 'Groove' effect and 'Thin' Border:

Here is the same Dialog with a 'Thin', 'Outset' Border:

Frames are used to hold Icons and Pictures or to draw a Border around Text or Images. Frames have Psuedo Rollover Background Colours. Frames can also be used as dividers between content

There are 3 parts to a Progressbar, the 'Progressbar' (and 'Progressbar Box), the 'ProgressbarTitleText' and the 'ProgressbarPercentageText'. The 'Progressbar' Box (progress-box) is the container for the 'Progressbar Box' (progressbar-box) and requires to be displayed using 'Progressbar:=True' in the Pop.Box() Function

The 'ProgressbarTitleText' is used to display Text alongside the Progressbar and can be used like this:

ProgressbarTitleText:="Press {Esc} to cancel the process"
                            

The 'ProgressbarPercentageText' is used to display the actual Percentage value ie. "8%", "50%" or "100%". It can be used like this:

ProgressbarPercentageText:="0%"
                            

All of these can be used in combination or in isolation to some extent depending on the result that you wish to achieve. You can also just use a normal 'Title' or 'Message' with a Progressbar. I have included extensive demonstrations of a whole variety of Progressbars running dummy tasks so that you get some idea of just how flexible the Code is

To use a Progressbar you must include a call to your Subroutine or Function by adding the Name of your Subroutine or Function to the 'Callback' Parameter in the Pop.Box() Function like this:

Callback:="Task7"
                            

Then, in order that you can include a Progressbar whilst running a task, you need to use the 'CallbackUpdate()' Subroutine in conjunction with the 'Pop.Aborted()' Subroutine, passing the name of the 'Element' that you would like to update ie. a Message Box or a Title, like this (you will not neccessarily need to include all of these calls, this is just example Code to give you an idea, please see the examples that come with the Pop.xlsm download File):

If Pop.Aborted Then
 Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data
Please wait...

- Process aborted..."
 Pop.Pause 3000
Else
 Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%"
 Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data
Complete..."
 Pop.CallbackUpdate DialogElement:="progress-percentage-box", UpdateValue:=iVal
 Pop.CallbackUpdate DialogElement:="progressbar-box", UpdateValue:=iVal
 Pop.Pause 3000
End If
                            

To exit whilst running a task you would use the 'Pop.CallbackExit()' Subroutine which will then ensure a smooth exit from a Pop Box Dialog

To build a Pause into any of your routines, you can use the 'Pop.Pause()' Subroutine like this:

Pop.Pause 3000
                            

The Close Box (or Close Cross Box) is used to dismiss the Pop Box or Dialog. The Close Box has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. It is turned on by setting 'CloseButton:=True' in the Pop.Box() Function

The Close Box uses CSS PsuedoStyles() for Rollover/Rollout Background, Font Colours and Tooltip. It is not Text and is not an Image. It is displayed using a single HTML Code which can be changed via CSS PsuedoStyles() - the default HTML Code is '✖' or '&#10006;'

If you don't like the Close Cross used or you fancy something different, then you can change this Symbol to (almost) anything you like that is represented by the HTML Code Table shown below

Here is the Code to change the Close Cross and display an alternative Tooltip using the '✗' symbol '✗'

PsuedoStyles:="ok-rollover-background|#DAE3E8,ok-rollout-background|#D0D9E0,ok-rollover-colour|#3E585F,ok-text|Okay,ok-title|Close the dialog," & _
              "close-rollout-colour|#666666,close-cross|✗,close-tooltip|Click this alternative close cross to close the dialog"
                            

Here is a full Table listing of HTML Codes that you may be able to use depending on your system and how it interprets the Codes:

 	 			Space
!	!			Exclamation mark
"	"	"		Double quote
#	#	#		Pound (hash) symbol
$	$	$	Dollar
%	%	%	Percent
&	&	&		Ampersand
'	'	'		Single quote
(	(	(		Opening parenthesis
)	)	)		Closing parenthesis
*	*	*		Asterisk
+	+	+		Plus sign
,	,	,		Comma
-	-	−		Minus sign - Hyphen
.	.	.	Period
/	/	/		Forward slash
0	0			
1	1			
2	2			
3	3			
4	4			
5	5			
6	6			
7	7			
8	8			
9	9			
:	:	:		Colon
;	&#59;	;		Semicolon
<	&#60;	&lt;		Less than sign
=	&#61;	&equals;	Equal sign
>	&#62;	&gt;		Greater than sign
?	&#63;	&quest;		Question mark
@	&#64;	&commat;	At symbol
A	&#65;			
B	&#66;			
C	&#67;			
D	&#68;			
E	&#69;			
F	&#70;			
G	&#71;			
H	&#72;			
I	&#73;			
J	&#74;			
K	&#75;			
L	&#76;			
M	&#77;			
N	&#78;			
O	&#79;			
P	&#80;			
Q	&#81;			
R	&#82;			
S	&#83;			
T	&#84;			
U	&#85;			
V	&#86;			
W	&#87;			
X	&#88;			
Y	&#89;			
Z	&#90;			
[	&#91;	&lsqb;		Opening bracket
\	&#92;	&bsol;		Backslash
]	&#93;	&rsqb;		Closing bracket
^	&#94;	&Hat;		Caret - circumflex
_	&#95;	&lowbar;	Underscore
`	&#96;	&grave;		Grave accent
a	&#97;			
b	&#98;			
c	&#99;			
d	&#100;			
e	&#101;			
f	&#102;			
g	&#103;			
h	&#104;			
i	&#105;			
j	&#106;			
k	&#107;			
l	&#108;			
m	&#109;			
n	&#110;			
o	&#111;			
p	&#112;			
q	&#113;			
r	&#114;			
s	&#115;			
t	&#116;			
u	&#117;			
v	&#118;			
w	&#119;			
x	&#120;			
y	&#121;			
z	&#122;			
{	&#123;	&lcub;		Opening brace
|	&#124;	&verbar;	Vertical bar
}	&#125;	&rcub;		Closing brace
~	&#126;			Equivalency sign - tilde
 	&#160;	&nbsp;		Non-breaking space
¡	&#161;	&iexcl;		Inverted exclamation mark
¢	&#162;	&cent;		Cent sign
£	&#163;	&pound;		Pound sign
¤	&#164;	&curren;	Currency sign
¥	&#165;	&yen;		Yen sign
¦	&#166;	&brvbar;	Broken vertical bar
§	&#167;	&sect;		Section sign
¨	&#168;	&uml;		Spacing diaeresis - umlaut
©	&#169;	&copy;		Copyright sign
ª	&#170;	&ordf;		Feminine ordinal indicator
«	&#171;	&laquo;		Left double angle quotes
¬	&#172;	&not;		Not sign
­	&#173;	&shy;		Soft hyphen
®	&#174;	&reg;		Registered trade mark sign
¯	&#175;	&macr;		Spacing macron - overline
°	&#176;	&deg;		Degree sign
±	&#177;	&plusmn;	Plus-or-minus sign
²	&#178;	&sup2;		Superscript two - squared
³	&#179;	&sup3;		Superscript three - cubed
´	&#180;	&acute;		Acute accent - spacing acute
µ	&#181;	&micro;		Micro sign
¶	&#182;	&para;		Pilcrow sign - paragraph sign
·	&#183;	&middot;	Middle dot - Georgian comma
¸	&#184;	&cedil;		Spacing cedilla
¹	&#185;	&sup1;		Superscript one
º	&#186;	&ordm;		Masculine ordinal indicator
»	&#187;	&raquo;		Right double angle quotes
¿	&#191;	&iquest;	Inverted question mark
×	&#215;	&times;		Multiplication sign
÷	&#247;	&divide;	Division sign
À	&#192;	&Agrave;	Latin capital letter A with grave
Á	&#193;	&Aacute;	Latin capital letter A with acute
#N/A
Ã	&#195;	&Atilde;	Latin capital letter A with tilde
Ä	&#196;	&Auml;		Latin capital letter A with diaeresis
Å	&#197;	&Aring;		Latin capital letter A with ring above
Æ	&#198;	&AElig;		Latin capital letter AE
Ç	&#199;	&Ccedil;	Latin capital letter C with cedilla
È	&#200;	&Egrave;	Latin capital letter E with grave
É	&#201;	&Eacute;	Latin capital letter E with acute
Ê	&#202;	&Ecirc;		Latin capital letter E with circumflex
Ë	&#203;	&Euml;		Latin capital letter E with diaeresis
Ì	&#204;	&Igrave;	Latin capital letter I with grave
Í	&#205;	&Iacute;	Latin capital letter I with acute
Î	&#206;	&Icirc;		Latin capital letter I with circumflex
Ï	&#207;	&Iuml;		Latin capital letter I with diaeresis
Ð	&#208;	&ETH;		Latin capital letter ETH
Ñ	&#209;	&Ntilde;	Latin capital letter N with tilde
Ò	&#210;	&Ograve;	Latin capital letter O with grave
Ó	&#211;	&Oacute;	Latin capital letter O with acute
Ô	&#212;	&Ocirc;		Latin capital letter O with circumflex
Õ	&#213;	&Otilde;	Latin capital letter O with tilde
Ö	&#214;	&Ouml;		Latin capital letter O with diaeresis
Ø	&#216;	&Oslash;	Latin capital letter O with slash
Ù	&#217;	&Ugrave;	Latin capital letter U with grave
Ú	&#218;	&Uacute;	Latin capital letter U with acute
Û	&#219;	&Ucirc;		Latin capital letter U with circumflex
Ü	&#220;	&Uuml;		Latin capital letter U with diaeresis
Ý	&#221;	&Yacute;	Latin capital letter Y with acute
Þ	&#222;	&THORN;		Latin capital letter THORN
ß	&#223;	&szlig;		Latin small letter sharp s - ess-zed
à	&#224;	&agrave;	Latin small letter a with grave
á	&#225;	&aacute;	Latin small letter a with acute
â	&#226;	&acirc;		Latin small letter a with circumflex
ã	&#227;	&atilde;	Latin small letter a with tilde
ä	&#228;	&auml;		Latin small letter a with diaeresis
å	&#229;	&aring;		Latin small letter a with ring above
æ	&#230;	&aelig;		Latin small letter ae
ç	&#231;	&ccedil;	Latin small letter c with cedilla
è	&#232;	&egrave;	Latin small letter e with grave
é	&#233;	&eacute;	Latin small letter e with acute
ê	&#234;	&ecirc;		Latin small letter e with circumflex
ë	&#235;	&euml;		Latin small letter e with diaeresis
ì	&#236;	&igrave;	Latin small letter i with grave
í	&#237;	&iacute;	Latin small letter i with acute
î	&#238;	&icirc;		Latin small letter i with circumflex
ï	&#239;	&iuml;		Latin small letter i with diaeresis
ð	&#240;	&eth;		Latin small letter eth
ñ	&#241;	&ntilde;	Latin small letter n with tilde
ò	&#242;	&ograve;	Latin small letter o with grave
ó	&#243;	&oacute;	Latin small letter o with acute
ô	&#244;	&ocirc;		Latin small letter o with circumflex
õ	&#245;	&otilde;	Latin small letter o with tilde
ö	&#246;	&ouml;		Latin small letter o with diaeresis
ø	&#248;	&oslash;	Latin small letter o with slash
ù	&#249;	&ugrave;	Latin small letter u with grave
ú	&#250;	&uacute;	Latin small letter u with acute
û	&#251;	&ucirc;		Latin small letter u with circumflex
ü	&#252;	&uuml;		Latin small letter u with diaeresis
ý	&#253;	&yacute;	Latin small letter y with acute
þ	&#254;	&thorn;		Latin small letter thorn
ÿ	&#255;	&yuml;		Latin small letter y with diaeresis
Œ	&#338;	&OElig;		Latin capital letter OE
œ	&#339;	&oelig;		Latin small letter oe
Š	&#352;	&Scaron;	Latin capital letter S with caron
š	&#353;	&scaron;	Latin small letter s with caron
Ÿ	&#376;	&Yuml;		Latin capital letter Y with diaeresis
ƒ	&#402;	&fnof;		Latin small f with hook - function
Α	&#913;	&Alpha;		Greek capital letter alpha
Β	&#914;	&Beta;		Greek capital letter beta
Γ	&#915;	&Gamma;		Greek capital letter gamma
Δ	&#916;	&Delta;		Greek capital letter delta
Ε	&#917;	&Epsilon;	Greek capital letter epsilon
Ζ	&#918;	&Zeta;		Greek capital letter zeta
Η	&#919;	&Eta;		Greek capital letter eta
Θ	&#920;	&Theta;		Greek capital letter theta
Ι	&#921;	&Iota;		Greek capital letter iota
Κ	&#922;	&Kappa;		Greek capital letter kappa
Λ	&#923;	&Lambda;	Greek capital letter lambda
Μ	&#924;	&Mu;		Greek capital letter mu
Ν	&#925;	&Nu;		Greek capital letter nu
Ξ	&#926;	&Xi;		Greek capital letter xi
Ο	&#927;	&Omicron;	Greek capital letter omicron
Π	&#928;	&Pi;		Greek capital letter pi
Ρ	&#929;	&Rho;		Greek capital letter rho
Σ	&#931;	&Sigma;		Greek capital letter sigma
Τ	&#932;	&Tau;		Greek capital letter tau
Υ	&#933;	&Upsilon;	Greek capital letter upsilon
Φ	&#934;	&Phi;		Greek capital letter phi
Χ	&#935;	&Chi;		Greek capital letter sigma
Ψ	&#936;	&Psi;		Greek capital letter psi
Ω	&#937;	&Omega;		Greek capital letter omega
α	&#945;	&alpha;		Greek small letter alpha
β	&#946;	&beta;		Greek small letter beta
γ	&#947;	&gamma;		Greek small letter gamma
δ	&#948;	&delta;		Greek small letter delta
ε	&#949;	&epsilon;	Greek small letter epsilon
ζ	&#950;	&zeta;		Greek small letter zeta
η	&#951;	&eta;		Greek small letter eta
θ	&#952;	&theta;		Greek small letter theta
ι	&#953;	&iota;		Greek small letter iota
κ	&#954;	&kappa;		Greek small letter kappa
λ	&#955;	&lambda;	Greek small letter lambda
μ	&#956;	&mu;		Greek small letter mu
ν	&#957;	&nu;		Greek small letter nu
ξ	&#958;	&xi;		Greek small letter xi
ο	&#959;	&omicron;	Greek small letter omicron
π	&#960;	&pi;		Greek small letter pi
ρ	&#961;	&rho;		Greek small letter rho
ς	&#962;	&sigmaf;	Greek small letter final sigma
σ	&#963;	&sigma;		Greek small letter sigma
τ	&#964;	&tau;		Greek small letter tau
υ	&#965;	&upsilon;	Greek small letter upsilon
φ	&#966;	&phi;		Greek small letter phi
χ	&#967;	&chi;		Greek small letter chi
ψ	&#968;	&psi;		Greek small letter psi
ω	&#969;	&omega;		Greek small letter omega
ϑ	&#977;	&thetasym;	Greek small letter theta symbol
ϒ	&#978;	&upsih;		Greek upsilon with hook symbol
ϖ	&#982;	&piv;		Greek pi symbol
–	&#8211;	&ndash;		En dash
—	&#8212;	&mdash;		Em dash
‘	&#8216;	&lsquo;		Left single quotation mark
’	&#8217;	&rsquo;		Right single quotation mark
‚	&#8218;	&sbquo;		Single low-9 quotation mark
“	&#8220;	&ldquo;		Left double quotation mark
”	&#8221;	&rdquo;		Right double quotation mark
„	&#8222;	&bdquo;		Double low-9 quotation mark
†	&#8224;	&dagger;	Dagger
‡	&#8225;	&Dagger;	Double dagger
•	&#8226;	&bull;		Bullet
…	&#8230;	&hellip;	Horizontal ellipsis
‰	&#8240;	&permil;	Per thousand sign
‱	&#8241;			Per thousand sign
※	&#8251;			Komejirushi
‼	&#8252;			Double exclamation mark
‽	&#8253;			Exclamation question
‾	&#8254;	&oline;		Overline, a.k.a. spacing overscore
⁁	&#8257;			Caret Insertion Point
⁂	&#8258;			Asterism
⁇	&#8263;			Double question
⁈	&#8264;			Question Exclamation
⁉	&#8265;			Exclamation Question
⁑	&#8273;			Double asterisk
€	&#8364;	&euro;		Euro sign
™	&#8482;	&trade;		Trade mark sign
∀	&#8704;	&forall;	For all
❝	&#10077;		Heavy double turned comma quotation mark ornament
❞	&#10078;		Heavy double comma quotation mark ornament
∂	&#8706;	&part;		Partial differential
∃	&#8707;	&exist;		There exists
∅	&#8709;	&empty;		Empty set, null set, diameter
∇	&#8711;	&nabla;		Nabla, backward difference
∈	&#8712;	&isin;		Element of
∉	&#8713;	&notin;		Not an element of
∋	&#8715;	&ni;		Contains as member
∏	&#8719;	&prod;		n-ary product
∑	&#8721;	&sum;		n-ary sumation
−	&#8722;	&minus;		Minus sign
∓	&#8723;			Minus-or-plus sign
∔	&#8724;			Dot plus
∕	&#8725;			Division slash
∖	&#8726;			Set minus
∗	&#8727;	&lowast;	Asterisk operator
√	&#8730;	&radic;		Square root
∛	&#8731;			Cube Root
∜	&#8732;			Root
∝	&#8733;	&prop;		Proportional to
∞	&#8734;	&infin;		Infinity
∠	&#8736;	&ang;		Angle
∧	&#8743;	&and;		Logical AND, or wedge
∩	&#8745;	&cap;		Intersection, or cap
∪	&#8746;	&cup;		Union, or cup
∫	&#8747;	&int;		Integral
∬	&#8748;			Double integral
∭	&#8749;			Triple integral
∮	&#8750;			Line integral
∯	&#8751;			Double line integral
∰	&#8752;			Triple line integral
∴	&#8756;	&there4;	Therefore
∵	&#8757;			Because sign
∶	&#8758;			Ratio
∷	&#8759;			Proportion
∻	&#8763;			Homothetic preferences
∼	&#8764;	&sim;		Tilde operator, or varies with
∽	&#8765;			Approximation
≀	&#8768;			Wreath product
≅	&#8773;	&cong;		Approximately equal to
≈	&#8776;	&asymp;		Almost equal to, asymptotic to
≠	&#8800;	&ne;		Not equal to
≡	&#8801;	&equiv;		Identical to
≤	&#8804;	&le;		Less-than or equal to
≥	&#8805;	&ge;		Greater-than or equal to
⊂	&#8834;	&sub;		Subset of
⊃	&#8835;	&sup;		Superset of
⊄	&#8836;	&nsub;		Not a subset of
⊆	&#8838;	&sube;		Subset of or equal to
⊇	&#8839;	&supe;		Superset of or equal to
⊕	&#8853;	&oplus;		Circled plus, direct sum
⊖	&#8854;			Circled minus
⊗	&#8855;	&otimes;	Circled times, vector product
⊘	&#8856;			Circled divide
⊙	&#8857;			Circled dot
⊚	&#8858;			Circled circle
⊛	&#8859;			Circled asterisk
⊜	&#8860;			Circled equals
⊝	&#8861;			Circled minus
⊥	&#8869;	&perp;		Up tack, orthogonal to, perpendicular
⊦	&#8870;	&or;		Logical OR, or vee
⋅	&#8901;	&sdot;		Dot operator
⌈	&#8968;	&lceil;		Left ceiling, a.k.a. apl upstile
⌉	&#8969;	&rceil;		Right ceiling
⌊	&#8970;	&lfloor;	Left floor, apl downstile
⌋	&#8971;	&rfloor;	Right floor
▪	&#9642;			Black small square
◉	&#9673;			Fisheye
◊	&#9674;	&loz;		Lozenge
○	&#9675;			White circle
◎	&#9678;			Bullseye
☆	&#9734;			White 5 point star
¼	&#188;	&frac14;	Fraction one quarter
½	&#189;	&frac12;	Fraction one half
¾	&#190;	&frac34;	Fraction three quarters
⅕	&#8533;			Fraction one fifth
⅖	&#8534;			Fraction two fifths
⅗	&#8535;			Fraction three fifths
⅘	&#8536;			Fraction four fifths
⅙	&#8537;			Fraction one sixth
⅚	&#8538;			Fraction five sixths
⅛	&#8539;			Fraction one eighth
⅜	&#8540;			Fraction three eighths
⅝	&#8541;			Fraction five eighths
⅞	&#8542;			Fraction seven eighths
←	&#8592;	&larr;		Leftwards arrow
↑	&#8593;	&uarr;		Upwards arrow
→	&#8594;	&rarr;		Rightwards arrow
↓	&#8595;	&darr;		Downwards arrow
↔	&#8596;	&harr;		Left right arrow
↕	&#8597;			Up down arrow
↖	&#8598;			North west arrow
↗	&#8599;			North east arrow
↘	&#8600;			South east arrow
↙	&#8601;			South west arrow
↚	&#8602;			Leftwards arrow with stroke
↛	&#8603;			Rightwards arrow with stroke
↜	&#8604;			Leftwards wave arrow
↝	&#8605;			Rightwards wave arrow
↞	&#8606;			Leftwards two headed arrow
↟	&#8607;			Upwards two headed arrow
↠	&#8608;			Rightwards two headed arrow
↡	&#8609;			Downwards two headed arrow
↢	&#8610;			Leftwards arrow with tail
↣	&#8611;			Rightwards arrow with tail
↤	&#8612;			Leftwards arrow from bar
↥	&#8613;			Upwards arrow from bar
↦	&#8614;			Downwards arrow from bar
↨	&#8616;			Up down arrow with base
↩	&#8617;			Leftwards arrow with hook
↪	&#8618;			Rightwards arrow with hook
↫	&#8619;			Leftwards arrow with loop
↬	&#8620;			Rightwards arrow with loop
↭	&#8621;			Left right wave arrow
↮	&#8622;			Left right arrow with stroke
↯	&#8623;			Downwards zigzag arrow
↰	&#8624;			Upwards arrow with tip leftwards
↱	&#8625;			Upwards arrow with tip rightwards
↲	&#8626;			Downwards arrow with tip leftwards
↳	&#8627;			Downwards arrow with tip rightwards
↴	&#8628;			Rightwards arrow with corner downwards
↵	&#8629;	&crarr;		Downwards arrow with corner leftwards
↶	&#8630;			Anticlockwise top semicircle arrow
↷	&#8631;			Clockwise top semicircle arrow
↸	&#8632;			North west arrow to long bar
↹	&#8633;			Leftwards arrow to bar over rightwards arrow to bar
↺	&#8634;			Anticlockwise open circle arrow
↻	&#8635;			Clockwise open circle arrow
↼	&#8636;			Leftwards harpoon with barb upwards
↽	&#8637;			Leftwards harpoon with barb downwards
↾	&#8638;			Upwards harpoon with barb rightwards
↿	&#8639;			Upwards harpoon with barb leftwards
⇀	&#8640;			Rightwards harpoon with barb upwards
⇁	&#8641;			Rightwards harpoon with barb downwards
⇂	&#8642;			Downwards harpoon with barb rightwards
⇃	&#8643;			Downwards harpoon with barb leftwards
⇄	&#8644;			Rightwards arrow over leftwards arrow
⇅	&#8645;			Upwards arrow leftwards of downwards arrow
⇆	&#8646;			Leftwards arrow over rightwards arrow
⇇	&#8647;			Leftwards paired arrows
⇈	&#8648;			Upwards paired arrows
⇉	&#8649;			Rightwards paired arrows
⇊	&#8650;			Downwards paired arrows
⇋	&#8651;			Leftwards harpoon over rightwards harpoon
⇌	&#8652;			Rightwards harpoon over leftwards harpoon
⇍	&#8653;			Leftwards double arrow with stroke
⇎	&#8654;			Left right double arrow with stroke
⇏	&#8655;			Rightwards double arrow with stroke
⇐	&#8656;	&lArr;		Leftwards double arrow
⇑	&#8657;	&uArr;		Upwards double arrow
⇒	&#8658;	&rArr;		Rightwards double arrow
⇓	&#8659;	&dArr;		Downwards double arrow
⇔	&#8660;	&hArr;		Left right double arrow
⇕	&#8661;			Up down double arrow
⇖	&#8662;			North west double arrow
⇗	&#8663;			North east double arrow
⇘	&#8664;			South east double arrow
⇙	&#8665;			South west double arrow
⇚	&#8666;			Leftwards triple arrow
⇛	&#8667;			Rightwards triple arrow
⇜	&#8668;			Leftwards squiggle arrow
⇝	&#8669;			Rightwards squiggle arrow
⇞	&#8670;			Upwards arrow with double stroke
⇟	&#8671;			Downwards arrow with double stroke
⇠	&#8672;			Leftwards dashed arrow
⇡	&#8673;			Upwards dashed arrow
⇢	&#8674;			Rightwards dashed arrow
⇣	&#8675;			Downwards dashed arrow
⇤	&#8676;			Leftwards arrow to bar
⇥	&#8677;			Rightwards arrow to bar
⇦	&#8678;			Leftwards white arrow
⇧	&#8679;			Upwards white arrow
⇨	&#8680;			Rightwards white arrow
⇩	&#8681;			Downwards white arrow
➘	&#10136;		Heavy south east arrow
➙	&#10137;		Heavy rightwards arrow
➚	&#10138;		Heavy north east arrow
➛	&#10139;		Drafting point rightwards arrow
➜	&#10140;		Heavy round-tipped rightwards arrow
➝	&#10141;		Triangle-headed rightwards arrow
➞	&#10142;		Heavy triangle-headed rightwards arrow
➟	&#10143;		Dashed triangle-headed rightwards arrow
➠	&#10144;		Heavy dashed triangle-headed rightwards arrow
➡	&#10145;		Black rightwards arrow
➢	&#10146;		Three-d top-lighted rightwards arrowhead
➣	&#10147;		Three-d bottom-lighted rightwards arrowhead
➤	&#10148;		Black rightwards arrowhead
➥	&#10149;		Heavy black curved upwards and rightwards arrow
➧	&#10151;		Squat black rightwards arrow
➨	&#10152;		Heavy concave-pointed black rightwards arrow
➩	&#10153;		Right-shaded white rightwards arrow
➪	&#10154;		Left-shaded white rightwards arrow
➫	&#10155;		Back-tilted shadowed white rightwards arrow
➬	&#10156;		Front-tilted shadowed white rightwards arrow
➭	&#10157;		Heavy lower right-shadowed white rightwards arrow
➮	&#10158;		Heavy upper right-shadowed white rightwards arrow
➯	&#10159;		Notched lower right-shadowed white rightwards arrow
➱	&#10161;		Notched upper right-shadowed white rightwards arrow
➲	&#10162;		Circled heavy white rightwards arrow
➳	&#10163;		White-feathered rightwards arrow
➴	&#10164;		Black-feathered south east arrow
➵	&#10165;		Black-feathered rightwards arrow
➶	&#10166;		Black-feathered north east arrow
➷	&#10167;		Heavy black-feathered south east arrow
➸	&#10168;		Heavy black-feathered rightwards arrow
➹	&#10169;		Heavy black-feathered north east arrow
➺	&#10170;		Teardrop-barbed rightwards arrow
➻	&#10171;		Heavy teardrop-shanked rightwards arrow
➼	&#10172;		Wedge-tailed rightwards arrow
➽	&#10173;		Heavy wedge-tailed rightwards arrow
➾	&#10174;		Open-outlined rightwards arrow
⋆	&#8902;			5 point star
★	&#9733;			Black 5 point star
⚝	&#9885;			Outlined white star
⛤	&#9956;			
⛥	&#9957;			
⛦	&#9958;			
⛧	&#9959;			
✢	&#10018;		Four teardrop-spoked asterisk
✣	&#10019;		Four balloon-spoked asterisk
✤	&#10020;		Heavy four balloon-spoked asterisk
✥	&#10021;		Four club-spoked asterisk
✦	&#10022;		Black four pointed star
✧	&#10023;		White four pointed star
✨	&#10024;			
✩	&#10025;		Stress outlined white star
✪	&#10026;		Circled white star
✫	&#10027;		Open centre black star
✬	&#10028;		Black centre white star
✭	&#10029;		Outlined black star
✮	&#10030;		Heavy outlined black star
✯	&#10031;		Pinwheel star
✰	&#10032;		Shadowed white star
✱	&#10033;		Heavy asterisk
✲	&#10034;		Open centre asterisk
✳	&#10035;		Eight spoked asterisk
✴	&#10036;		Eight pointed black star
✵	&#10037;		Eight pointed pinwheel star
✶	&#10038;		Six pointed black star
✷	&#10039;		Heavy eight pointed rectilinear black star
✹	&#10041;		Twelve pointed black star
✺	&#10042;		Sixteen pointed asterisk
✻	&#10043;		Teardrop-spoked asterisk
✼	&#10044;		Open centre teardrop-spoked asterisk
✽	&#10045;		Heavy teardrop-spoked asterisk
✾	&#10046;		Six petalled black and white florette
❂	&#10050;		Circled open centre eight pointed star
❃	&#10051;		Heavy teardrop-spoked pinwheel asterisk
❅	&#10053;		Tight trifoliate snowflake
❆	&#10054;		Heavy chevron snowflake
❇	&#10055;		Sparkle
❈	&#10056;		Heavy sparkle
❉	&#10057;		Balloon-spoked asterisk
❊	&#10058;		Eight teardrop-spoked propeller asterisk
❋	&#10059;		Heavy eight teardrop-spoked propeller asterisk
❢	&#10082;		Heart Exclamation Mark
❣	&#10083;		Exclamation Heart
❤	&#10084;		Big Heart
❥	&#10085;		Rotated Heart
❦	&#10086;		Floral Heart
❧	&#10087;		Floral Heart Rotated
💓	&#128147;		Heart Pulse
💔	&#128148;		Broken Heart
💕	&#128149;		Heart Couple
💖	&#128150;		Heart Stars
💗	&#128151;		Hearts
💘	&#128152;		Heart with Arrow
💙	&#128153;		Blue Heart
💚	&#128154;		Green Heart
💛	&#128155;		Yellow Heart
💜	&#128156;		Purple Heart
💝	&#128157;		Heart with Ribbon
💞	&#128158;		Hearts Together
♥	♥			Black Heart
♡	&#9825;			Red Heart
♈	&#9800;			Aries
♉	&#9801;			Taurus
♊	&#9802;			Gemini
♋	&#9803;			Cancer
♌	&#9804;			Leo
♍	&#9805;			Virgo
♎	&#9806;			Libra
♏	&#9807;			Scorpio
♐	&#9808;			Sagittarius
♑	&#9809;			Capricorn
♒	&#9810;			Aquarius
♓	&#9811;			Pisces
♔	&#9812;			White chess king
♕	&#9813;			White chess queen
♖	&#9814;			White chess rook
♗	&#9815;			White chess bishop
♘	&#9816;			White chess knight
♙	&#9817;			White chess pawn
♚	&#9818;			Black chess king
♛	&#9819;			Black chess queen
♜	&#9820;			Black chess rook
♝	&#9821;			Black chess bishop
♞	&#9822;			Black chess knight
♟	&#9823;			Black chess pawn
♠	&#9824;	&spades;	Black Spade suit
♡	&#9825;			White Heart suit, valentine
♢	&#9826;			White Diamond suit
♣	&#9827;	&clubs;		Black Club suit, shamrock
♤	&#9828;			White Spade suit
♥	&#9829;	&hearts;	Black Heart suit, valentine
♦	&#9830;	&diams;		Black Diamond suit
♧	&#9831;			White Club suit, shamrock
⚀	&#9856;			Die 1
⚁	&#9857;			Die 2
⚂	&#9858;			Die 3
⚃	&#9859;			Die 4
⚄	&#9860;			Die 5
⚅	&#9861;			Die 6
⚽	&#9917;			
⚾	&#9918;			
⛷	&#9975;			
⛸	&#9976;			
⛹	&#9977;			
①	&#9312;			Circled digit one
②	&#9313;			Circled digit two
③	&#9314;			Circled digit three
④	&#9315;			Circled digit four
⑤	&#9316;			Circled digit five
⑥	&#9317;			Circled digit six
⑦	&#9318;			Circled digit seven
⑧	&#9319;			Circled digit eight
⑨	&#9320;			Circled digit nine
⑩	&#9321;			Circled number ten
⑪	&#9322;			Circled number eleven
⑫	&#9323;			Circled number twelve
⑬	&#9324;			Circled number thirteen
⑭	&#9325;			Circled number fourteen
⑮	&#9326;			Circled number fifteen
⑯	&#9327;			Circled number sixteen
⑰	&#9328;			Circled number seventeen
⑱	&#9329;			Circled number eighteen
⑲	&#9330;			Circled number nineteen
⑳	&#9331;			Circled number twenty
⑴	&#9332;			Parenthesized digit one
⑵	&#9333;			Parenthesized digit two
⑶	&#9334;			Parenthesized digit three
⑷	&#9335;			Parenthesized digit four
⑸	&#9336;			Parenthesized digit five
⑹	&#9337;			Parenthesized digit six
⑺	&#9338;			Parenthesized digit seven
⑻	&#9339;			Parenthesized digit eight
⑼	&#9340;			Parenthesized digit nine
⑽	&#9341;			Parenthesized number ten
⑾	&#9342;			Parenthesized number eleven
⑿	&#9343;			Parenthesized number twelve
⒀	&#9344;			Parenthesized number thirteen
⒁	&#9345;			Parenthesized number fourteen
⒂	&#9346;			Parenthesized number fifteen
⒃	&#9347;			Parenthesized number sixteen
⒄	&#9348;			Parenthesized number seventeen
⒅	&#9349;			Parenthesized number eighteen
⒆	&#9350;			Parenthesized number nineteen
⒇	&#9351;			Parenthesized number twenty
⒈	&#9352;			Digit one full stop
⒉	&#9353;			Digit two full stop
⒊	&#9354;			Digit three full stop
⒋	&#9355;			Digit four full stop
⒌	&#9356;			Digit five full stop
⒍	&#9357;			Digit six full stop
⒎	&#9358;			Digit seven full stop
⒏	&#9359;			Digit eight full stop
⒐	&#9360;			Digit nine full stop
⒑	&#9361;			Number ten full stop
⒒	&#9362;			Number eleven full stop
⒓	&#9363;			Number twelve full stop
⒔	&#9364;			Number thirteen full stop
⒕	&#9365;			Number fourteen full stop
⒖	&#9366;			Number fifteen full stop
⒗	&#9367;			Number sixteen full stop
⒘	&#9368;			Number seventeen full stop
⒙	&#9369;			Number eighteen full stop
⒚	&#9370;			Number nineteen full stop
⒛	&#9371;			Number twenty full stop
⓪	&#9450;			Circled digit zero
⓫	&#9451;			Dingbat negative circled number evelven
⓬	&#9452;			Dingbat negative circled number twelve
⓭	&#9453;			Dingbat negative circled number thirteen
⓮	&#9454;			Dingbat negative circled number fourteen
⓯	&#9455;			Dingbat negative circled number fifteen
⓰	&#9456;			Dingbat negative circled number sixteen
⓱	&#9457;			Dingbat negative circled number seventeen
⓲	&#9458;			Dingbat negative circled number eighteen
⓳	&#9459;			Dingbat negative circled number nineteen
⓴	&#9460;			Dingbat negative circled number twenty
❶	&#10102;		Dingbat negative circled digit one
❷	&#10103;		Dingbat negative circled digit two
❸	&#10104;		Dingbat negative circled digit three
❹	&#10105;		Dingbat negative circled digit four
❺	&#10106;		Dingbat negative circled digit five
❻	&#10107;		Dingbat negative circled digit six
❼	&#10108;		Dingbat negative circled digit seven
❽	&#10109;		Dingbat negative circled digit eight
❾	&#10110;		Dingbat negative circled digit nine
❿	&#10111;		Dingbat negative circled number ten
֍	&#1421;			Right facing Armenian eternity sign
֎	&#1422;			Left facing Armenian eternity sign
ॐ	&#2384;			Devanagari Om
☤	&#9764;			Caduceus
☥	&#9765;			Ankh
☦	&#9766;			Orthodox cross
☧	&#9767;			Chi Rho
☨	&#9768;			Cross of Lorraine
☩	&#9769;			Cross of Jerusalem
☪	&#9770;			Star and Crescent
☫	&#9771;			Farsi Symbol
☬	&#9772;			Adi Shakti
☭	&#9773;			Hammer and Sickle
☮	&#9774;			Peace Symbol
☯	&#9775;			Yin Yang
☸	&#9784;			Wheel of Dharma
✝	&#10013;		Latin cross
✞	&#10014;		Shadowed white Latin cross
✟	&#10015;		Outlined Latin Cross
✠	&#10016;		Maltese cross
✡	&#10017;		Star of David
♩	&#9833;			Crotchet / Quarter note
♪	&#9834;			Quaver / Eighth note
♫	&#9835;			Quaver
♬	&#9836;			Double Quaver
♭	&#9837;			Flat note
♮	&#9838;			Natural Note
♯	&#9839;			Sharp Note
🎹	&#127929;		Keyboard
🎼	&#127932;		Score
࠽	&#2109;			Degree fahrenheit sign
℃	&#8451;			Degrees Celsius
⌘	&#8984;			Place of interest sign
⌚	&#8986;			Watch
⌛	&#8987;			Egg timer
⌧	&#8999;			X in a rectangle box
⌨	&#9000;			Keyboard
⌬	&#9004;			Benzine ring
⍓	&#9043;			APL functional symbol quad up caret
■	&#9632;			Black square
□	&#9633;			White square
▯	&#9647;			White vertical rectangle
◆	&#9670;			Black diamond
●	&#9679;			Black circle
☀	&#9728;			Black sun with rays
☁	&#9729;			Cloud
☂	&#9730;			Umbrella
☃	&#9731;			Snowman
☄	&#9732;			Comet
☎	&#9742;			Black telephone
☏	&#9743;			White telephone
☑	&#9745;			Ballot box with check
☒	&#9746;			Ballot box with X
☘	&#9752;			Clover
☠	&#9760;			Skull and crossbones
☢	&#9762;			Radioactive sign
☣	&#9763;			Biohazard sign
☹	&#9785;			White frowning face
☺	&#9786;			White smiling face
☼	&#9788;			White sun with rays
☽	&#9789;			First quarter moon
☾	&#9790;			Last quarter moon
☿	&#9791;			Mercury
♀	&#9792;			Female sign
♁	&#9793;			Earth
♂	&#9794;			Male sign
♨	&#9832;			Hot springs
♲	&#9842;			Recycle
♻	&#9851;			Recycle
♼	&#9852;			Recycle
♽	&#9853;			Recycle
♿	&#9855;			Disability
⚒	&#9874;			Hammers
⚓	&#9875;			Anchor
⚔	&#9876;			Duelling Swords
⚕	&#9877;			Staff of aesculapius
⚖	&#9878;			Scales
⚘	&#9880;			Flower
⚙	&#9881;			Gear
⚚	&#9882;			Staff of hermes
⚛	&#9883;			Atomic
⚜	&#9884;			Fleur-de-lis
⚞	&#9886;			Three lines converging right
⚟	&#9887;			Three lines converging left
⚠	&#9888;			Caution
⚡	&#9889;			Electricity
⚢	&#9890;			
⚣	&#9891;			
⚤	&#9892;			
⚥	&#9893;			
⚦	&#9894;			
⚧	&#9895;			
⚨	&#9896;			
⚩	&#9897;			
⚰	&#9904;			
⚱	&#9905;			
⚲	&#9906;			
⚳	&#9907;			
⚴	&#9908;			
⚵	&#9909;			
⛄	&#9924;			
⛟	&#9951;			
⛱	&#9969;			
⛲	&#9970;			
⛳	&#9971;			
⛴	&#9972;			
⛵	&#9973;			
✀	&#9984;			
✁	&#9985;			Upper blade scissors
✂	&#9986;			Black scissors
✃	&#9987;			Lower blade scissors
✄	&#9988;			
✆	&#9990;			Telephone location sign
✈	&#9992;			Airplane
✉	&#9993;			Envelope
✊	&#9994;			
✋	&#9995;			
✌	&#9996;			Victory hand
✍	&#9997;			Writing hand
✎	&#9998;			Lower Right Pencil
✏	&#9999;			Pencil
✐	&#10000;		Upper Right Pencil
✓	&#10003;		Check mark
✔	&#10004;			
✕	&#10005;			
✖	&#10006;			
✗	&#10007;		Ballot X
✘	&#10008;			
✿	&#10047;		Black florette
❀	&#10048;		White florette
❁	&#10049;		Eight petalled outlined black florette
❄	&#10052;		Snowflake
❍	&#10061;		Shadowed white circle
❏	&#10063;		Lower right drop shadowed white square
❐	&#10064;		Upper right drop shadowed white square
❑	&#10065;		Lower right shadowed white square
❒	&#10066;		Upper right shadowed white square
❖	&#10070;		Black diamond minus white X
⧫	&#10731;		Black lozenge
⬧	&#11047;		Black medium lozenge
🔒	&#128274;		Padlock
₠	&#8352;			Euro-currency sign
₡	&#8353;			Cent sign
₤	&#8356;			Pound sterling
㍱	&#13169;		Hectopascal
㍲	&#13170;		Dalton (atomic mass)
㍳	&#13171;		Astronomical Unit
㍴	&#13172;		Bar (Pressure)
㍵	&#13173;			
㍶	&#13174;		Parsec
㎀	&#13184;		Pico Amps
㎁	&#13185;		Nano Amps
㎂	&#13186;		Micro Amps
㎃	&#13187;		Mega Amps
㎄	&#13188;		Kilo Amps
㎅	&#13189;		Kilobyte
㎆	&#13190;		Megabyte
㎇	&#13191;		Gigabyte
㎈	&#13192;		Calories
㎉	&#13193;		Kilocalories
㎊	&#13194;		Pico Farads
㎋	&#13195;		Nano Farads
㎌	&#13196;		Micro Farads
㎍	&#13197;		Micro Grams
㎎	&#13198;		Miligrams
㎏	&#13199;		Kilograms
㎐	&#13200;		Hertz
㎑	&#13201;		Kilohertz
㎒	&#13202;		Megahertz
㎓	&#13203;		Gigahertz
㎔	&#13204;		Terahertz
㎕	&#13205;		Micro litres
㎖	&#13206;		Mililitres
㎗	&#13207;		Decilitres
㎘	&#13208;		Kilolitres
㎙	&#13209;		Femtometre
㎚	&#13210;		Nanometre
㎛	&#13211;		Micrometre
㎜	&#13212;		Milimetre
㎝	&#13213;		Centimetre
㎞	&#13214;		Kilometre
㎟	&#13215;		Millimetre squared
㎠	&#13216;		Centimetre squared
㎡	&#13217;		Metre squared
㎢	&#13218;		Kilometre squared
㎣	&#13219;		Millimetre cubed
㎤	&#13220;		Centimetre cubed
㎥	&#13221;		Metre cubed
㎦	&#13222;		Kilometre cubed
㎧	&#13223;		Metres per second
㎨	&#13224;		Acceleration (metres per second per second)
㎩	&#13225;		Pascal
㎪	&#13226;		Kilopascal
㎫	&#13227;		Megapascal
㎬	&#13228;		Gigapascal
㎭	&#13229;		Radian
㎮	&#13230;		Radian per second
㎯	&#13231;		Radian per second per second
㎰	&#13232;		Petasecond
㎱	&#13233;		Nanosecond
㎲	&#13234;		Microsecond
㎳	&#13235;		Millisecond
㎴	&#13236;		Picovolt
㎵	&#13237;		Nanovolt
㎶	&#13238;		Microvolt
㎷	&#13239;		Milivolt
㎸	&#13240;		Kilovolt
㎹	&#13241;		Megavolt
㎺	&#13242;		Picowatt
㎻	&#13243;		Nanowatt
㎼	&#13244;		Microwatt
㎽	&#13245;		Milliwatt
㎾	&#13246;		Kilowatt
㎿	&#13247;		Megawatt
㏀	&#13248;		Kilo Ohm
㏁	&#13249;		Mega Ohm
㏂	&#13250;		AM
㏃	&#13251;		Becquerel
㏄	&#13252;		Cubic Centilitre
㏅	&#13253;		Candela
㏆	&#13254;		Content Kilogram
㏇	&#13255;			
㏈	&#13256;		Decibel
㏉	&#13257;		Gray
㏊	&#13258;		Hectare
㏋	&#13259;			
㏌	&#13260;			
㏍	&#13261;			
㏎	&#13262;			
㏏	&#13263;			
㏐	&#13264;			
㏑	&#13265;			
㏒	&#13266;			
㏓	&#13267;			
㏔	&#13268;			
㏕	&#13269;			
㏖	&#13270;		Mol
㏗	&#13271;		pH
㏘	&#13272;			
㏙	&#13273;		Parts Per Million
㏚	&#13274;			
㏛	&#13275;			
㏜	&#13276;			
㏝	&#13277;			
		&copy;		copyright
		&reg;		Registered trademark
		&curren;	Currency
		&cent;		Cent
&36;	&36;			Dollar
§	§			Section
☚	&#9754;			Left-pointing
☜	&#9756;			Left-pointing
☞	&#9758;			Right pointing
✍	&#9997;			Sign here
☹	&#9785;			Frowning face
☻	&#9787;			Black smiley face
☛	&#9755;			Right-pointing
☝	&#9757;			Upwards pointing
☟	&#9759;			Downwards pointing
✌	&#9996;			Victory sign
☺	&#9786;			Smiley face
₹	&#x20B9;		Indian Rupee (INR) sign
 ;	&#194 ;	&Acirc;		capital A, circumflex accent
 	&#8194;	&ensp;		en space
 	&#8195;	&emsp;		em space
 	&#8201;	&thinsp;	thin space
‌	&#8204;	&zwnj;		zero width non-joiner
‍	&#8205;	&zwj;		zero width joiner
‎	&#8206;	&lrm;		left-to-right mark
‏	&#8207;	&rlm;		right-to-left mark
‹	&#8249;	&lsaquo;	single left-pointing angle quotation mark
›	&#8250;	&rsaquo;	single right-pointing angle quotation mark
				bullet is NOT the same as bullet operator u+2219
′	&#8242;	&prime;		prime, a.k.a. minutes, a.k.a. feet
″	&#8243;	&Prime;		double prime, a.k.a. seconds, a.k.a. inches
⁄	&#8260;	&frasl;		fraction slash
℘	&#8472;	&weierp;	script capital P, a.k.a. power set, a.k.a. Weierstrass p
ℑ	&#8465;	&image;		blackletter capital I, a.k.a. imaginary part
ℜ	&#8476;	&real;		blackletter capital R, a.k.a. real part symbol
ℵ	&#8501;	&alefsym;	alef symbol
				can be used for is implied by
◄	&#9668;			black left pointing triangle
►	&#9658;			black right pointing triangle
▲	&#9650;			black up pointing triangle
▼	&#9660;			black down pointing triangle
〈	&#9001;	&lang;		left-pointing angle bracket
〉	&#9002;	&rang;		right-pointing angle bracket
                            

Here is an image of a Broken Heart:

Here are some random images of various alternative Close Cross Pop Boxes: