Viewing Arrows and symbols - dingbats, unicode characters, hexadecimal etc.
Arrows and symbols - dingbats, unicode characters, hexadecimal etc.
|
User: Christopher 11 years ago
|
|
|
This gets pretty confusing. A site like this gives me unicode, plus hexadecimal, plus the character itself. It seems to work if I just copy and paste the arrow like this: ⬅. But there must be a reason for using either ⬅ or U+2B05. In my attempts to make a Go Back button, the pasted arrow works. The hexadecimal one previews fine on my laptop but doesn't work on my mobile site. So how bout a little advice. Here's my sample code: <a style="font-size:42px;color:#CC0000;margin:0;padding:0;line-height:30px;cursor:pointer" onclick="history.go(-1)">⬅</a> ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 11 years ago
|
|
|
The number of special characters that work with iOS is very limited. It's better to insert them using CSS and the before or after pseudo selector anyway. The buttons shown on this page use pure CSS to create the various shapes... http://everwebcodebox.com/widgetbox/mobile/mobile-links.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 11 years ago
|
|
|
Quote: The hexadecimal one previews fine on my laptop but doesn't work on my mobile site. When I first looked at this I thought that you meant the arrow didn't appear as it does on a computer. Perhaps you meant that the go back button didn't work on a mobile device? ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 11 years ago
|
|
|
I can't figure this out. I just want this arrow to appear on mobile devices: ⬅. It's showing up on desktop, styled the way I want (red). But on my iPhone it's a white arrow in a blue glazed button. I've tried this: <a style="font-size:42px;color:#CC0000;margin:0;padding:0;line-height:30px;cursor:pointer" onclick="history.go(-1)">⬅</a> and this: <a style="font-size:42px;color:#CC0000;margin:0;padding:0;line-height:30px;cursor:pointer" onclick="history.go(-1)">⬅</a> and variations of this: <a style="content:2B05; font-size:42px;color:#CC0000;margin:0;padding:0;line-height:30px;cursor:pointer" onclick="history.go(-1)" /a> Nothing works. ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 11 years ago
|
|
|
Now you are beginning to find out the difference between design a website for conventional browsers and designing for mobile devices and browsers. These HTML special characters were invented back in the dark ages when web design consisted of table layouts and CSS hadn't been invented. iOS probably doesn't want to know about all these characters and makes a substitution. You will notice this a lot as you progress. Try looking at a contact form "submit" button in a standard browser and then in iOS to see how Apple tries to prettify your design! As I pointed out above, mobile website buttons should be created using CSS. Normally I would use the before and after pseudo classes for a button like this but, to make it easier to understand, I have placed the go back link inside 3 divs so that you can see how the various parts are created and fit together. I have commented the styles so that you can remove the border and change the colors. The border is there to show the outline of the containing div and the colors to show the triangle for the arrowhead and the rectangle for the shaft. HTML… <div class="goback"> <a onclick="history.go(-1)"></a> <div class="goback-arrow"></div> <div class="goback-shaft"></div> </div> CSS… <style type="text/css"> .goback a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; z-index: 10; cursor:pointer; } .goback { position: relative; width:55px; height:40px; margin: 0; padding: 0; border: 2px solid #000; /* delete this line to remove border */ -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; background: #FFF; } .goback-arrow{ width: 0px; height: 0px; border-style: solid; border-width: 20px 20px 20px 0px; border-color: transparent #000FFF transparent transparent; /* arrowhead color */ position: absolute; bottom: 0px; left: 1px; } .goback-shaft { background-color:#CC0000; /* arrow shaft color */ width: 34px; height:16px; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; position: absolute; bottom: 12px; left:20px; } </style> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |