Advanced Search

CSS and ASCII Icons

/ Published in: CSS
Save to your folder(s)
Just a little fun with ASCII Characters and CSS.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Ascii Characters</title>
  6. <style type="text/css">
  7. * {
  8. margin:0;
  9. padding:0;
  10. }
  11.  
  12. html {
  13. font:62.5%/1.5 "Lucida Grande", Verdana, sans-serif;
  14. }
  15.  
  16. ul,ol,dl,p {
  17. margin-bottom:1.5em;
  18. font-size:1.2em;
  19. }
  20.  
  21. li,dt,dd,p {
  22. font-size:1.2em;
  23. }
  24.  
  25. ul,ol,dl,p {
  26. margin-bottom:1.5em;
  27. }
  28.  
  29. li,dt,dd,p {
  30. font-size:1.2em;
  31. }
  32.  
  33. ul,ol,dl {
  34. margin-bottom:1.8em;
  35. }
  36.  
  37. p {
  38. margin-bottom:1.5em;
  39. }
  40.  
  41. /***** Global Settings *****/
  42. html,body {
  43. border:0;
  44. margin:0;
  45. padding:0;
  46. }
  47.  
  48. body {
  49. font:100%/1.25 Arial, Helvetica, sans-serif;
  50. }
  51.  
  52. /***** Headings *****/
  53. h1,h2,h3,h4,h5,h6 {
  54. margin:0;
  55. padding:0;
  56. font-weight:normal;
  57. }
  58.  
  59. h1 {
  60. padding:30px 0 25px;
  61. letter-spacing:-1px;
  62. font-size:2em;
  63. }
  64.  
  65. h2 {
  66. padding:20px 0;
  67. letter-spacing:-1px;
  68. font-size:1.5em;
  69. }
  70.  
  71. h3 {
  72. font-size:1em;
  73. font-weight:bold;
  74. }
  75.  
  76. /***** Common Formatting *****/
  77. p,ul,ol {
  78. margin:0;
  79. padding:0 0 1.25em;
  80. }
  81.  
  82. ul,ol {
  83. padding:0 0 1.25em 2.5em;
  84. }
  85.  
  86. blockquote {
  87. margin:1.25em;
  88. padding:1.25em 1.25em 0;
  89. }
  90.  
  91. small {
  92. font-size:.85em;
  93. }
  94.  
  95. img {
  96. border:0;
  97. }
  98.  
  99. sup {
  100. position:relative;
  101. bottom:.3em;
  102. vertical-align:baseline;
  103. }
  104.  
  105. sub {
  106. position:relative;
  107. bottom:-.2em;
  108. vertical-align:baseline;
  109. }
  110.  
  111. acronym,abbr {
  112. cursor:help;
  113. letter-spacing:1px;
  114. border-bottom:1px dashed;
  115. }
  116.  
  117. /***** Links *****/
  118. a,a:link,a:visited,a:hover {
  119. text-decoration:underline;
  120. }
  121.  
  122. /***** Forms *****/
  123. form {
  124. margin:0;
  125. padding:0;
  126. display:inline;
  127. }
  128.  
  129. form input,form select,form textarea {
  130. font:1em Arial, Helvetica, sans-serif;
  131. }
  132.  
  133. form textarea {
  134. width:100%;
  135. line-height:1.25;
  136. }
  137.  
  138. form label {
  139. cursor:pointer;
  140. }
  141.  
  142. /***** Tables *****/
  143. table {
  144. border:0;
  145. margin:0 0 1.25em;
  146. padding:0;
  147. }
  148.  
  149. table tr td {
  150. padding:2px;
  151. }
  152.  
  153. /***** Wrapper *****/
  154. #wrap {
  155. width:960px;
  156. margin:0 auto;
  157. }
  158.  
  159. /***** Global Classes *****/
  160. .clear {
  161. clear:both;
  162. }
  163.  
  164. .float-left {
  165. float:left;
  166. }
  167.  
  168. .float-right {
  169. float:right;
  170. }
  171.  
  172. .text-left {
  173. text-align:left;
  174. }
  175.  
  176. .text-right {
  177. text-align:right;
  178. }
  179.  
  180. .text-center {
  181. text-align:center;
  182. }
  183.  
  184. .text-justify {
  185. text-align:justify;
  186. }
  187.  
  188. .bold {
  189. font-weight:bold;
  190. }
  191.  
  192. .italic {
  193. font-style:italic;
  194. }
  195.  
  196. .underline {
  197. border-bottom:1px solid;
  198. }
  199.  
  200. .highlight {
  201. background:#ffc;
  202. }
  203.  
  204. .wrap {
  205. width:960px;
  206. margin:0 auto;
  207. }
  208.  
  209. .img-left {
  210. float:left;
  211. margin:4px 10px 4px 0;
  212. }
  213.  
  214. .img-right {
  215. float:right;
  216. margin:4px 0 4px 10px;
  217. }
  218.  
  219. .nopadding {
  220. padding:0;
  221. }
  222.  
  223. .noindent {
  224. margin-left:0;
  225. padding-left:0;
  226. }
  227.  
  228. .nobullet {
  229. list-style:none;
  230. list-style-image:none;
  231. }
  232.  
  233. * {
  234. margin:0;
  235. padding:0;
  236. }
  237.  
  238. body {
  239. font:13px Verdana, Sans-Serif;
  240. }
  241.  
  242. #page-wrap {
  243. margin:80px auto;
  244. width:90%;
  245. }
  246.  
  247. div {
  248. font-family:HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  249. font-weight:300;
  250. font-size:92px;
  251. color:hsla(0,50%,50%,1);
  252. }
  253.  
  254. div:hover {
  255. color:black;
  256. }
  257.  
  258. h1 {
  259. font:bold 50px Sans-Serif;
  260. letter-spacing:-1px;
  261. }
  262.  
  263. h2 {
  264. margin-top:30px;
  265. }
  266.  
  267. h3 {
  268. font-size:30px;
  269. }
  270.  
  271. a {
  272. text-decoration:none;
  273. }
  274.  
  275. .section {
  276. font-size:20px;
  277. text-align:center;
  278. font-weight:700;
  279. padding:10px;
  280. display:block;
  281. border-radius:6px;
  282. background:white;
  283. border:3px solid hsla(0,50%,50%,1);
  284. }
  285.  
  286. .clear {
  287. width:100%;
  288. height:10px;
  289. padding:20px 0;
  290. margin-bottom:10px;
  291. float:left;
  292. }
  293.  
  294. .clear:after {
  295. content:".";
  296. display:block;
  297. clear:both;
  298. visibility:hidden;
  299. line-height:0;
  300. height:0;
  301. }
  302.  
  303. .clear {
  304. display:inline-block;
  305. }
  306.  
  307. html[xmlns] .clear {
  308. display:block;
  309. }
  310.  
  311. * html .clear {
  312. height:1%;
  313. }
  314.  
  315. .box {
  316. display:inline-block;
  317. padding:10px;
  318. }
  319.  
  320. .box:after {
  321. content:" ";
  322. width:100%;
  323. height:100%;
  324. float:left;
  325. clear:both;
  326. margin:0;
  327. padding:0;
  328. }
  329.  
  330. strong {
  331. font-weight:700;
  332. font-size:120%;
  333. }
  334.  
  335. div.section-wrap {
  336. display:block;
  337. height:100%;
  338. width:80%;
  339. padding:40px;
  340. margin:0 auto;
  341. border:4px solid hsla(0,50%,50%,1);
  342. margin-bottom:70px;
  343. border-radius:12px;
  344. background:ghostwhite;
  345. }
  346.  
  347. body {
  348. background:#e5e6e6;
  349. }
  350. </style>
  351. </head>
  352. <body>
  353. <div id="page-wrap">
  354.   <div class="section-wrap">
  355.     <div class="box">&#9774;</div>
  356.     <div class="box">&#9745;</div>
  357.     <div class="box">&#10004;</div>
  358.     <div class="box">&#9760;</div>
  359.     <div class="box">&copy;</div>
  360.     <div class="box">&#9753;</div>
  361.     <div class="box">&#x2766;</div>
  362.     <div class="box">&#8470;</div>
  363.     <div class="box">&reg;</div>
  364.     <div class="box">&amp;</div>
  365.     <div class="box">?</div>
  366.     <div class="box">&ldquo;</div>
  367.     <div class="box">&rdquo;</div>
  368.     <div class="box">&ldquo;</div>
  369.     <div class="box">&rdquo;</div>
  370.     <div class="box">&laquo;</div>
  371.     <div class="box">&raquo;</div>
  372.     <div class="box">&lsquo;</div>
  373.     <div class="box">&rsquo;</div>
  374.     <div class="clear"></div>
  375.   </div>
  376.   <div class="section-wrap">
  377.     <div class="section"><strong>Arrows</strong></div>
  378.     <div class="box">&larr;</div>
  379.     <div class="box">&uarr;</div>
  380.     <div class="box">&rarr;</div>
  381.     <div class="box">&rarr;</div>
  382.     <div class="box">&darr;</div>
  383.     <div class="box">&harr;</div>
  384.     <div class="box">&#8597;</div>
  385.     <div class="box">&crarr;</div>
  386.     <div class="box">&lArr;</div>
  387.     <div class="box">&uArr;</div>
  388.     <div class="box">&rArr;</div>
  389.     <div class="box">&dArr;</div>
  390.     <div class="box">&hArr;</div>
  391.     <div class="clear"></div>
  392.   </div>
  393.   <div class="section-wrap">
  394.     <div class="section"><strong>Weather Elements</strong></div>
  395.     <div class="box">&#9728;</div>
  396.     <div class="box">&#9729;</div>
  397.     <div class="box">&#9729;</div>
  398.     <div class="box">&#9729;</div>
  399.     <div class="box">&#9730;</div>
  400.     <div class="box">&#9735;</div>
  401.     <div class="box">&#9736;</div>
  402.     <div class="box">&#9748;</div>
  403.     <div class="box">&#9788;</div>
  404.     <div class="box">&#9789;</div>
  405.     <div class="box">&#9790;</div>
  406.     <div class="box">&#8451;</div>
  407.     <div class="box">&#8457;</div>
  408.     <div class="clear"></div>
  409.   </div>
  410.   <div class="section-wrap">
  411.     <div class="section"><strong>Astrology</strong></div>
  412.     <div class="box">&#9776;</div>
  413.     <div class="box">&#9777;</div>
  414.     <div class="box">&#9778;</div>
  415.     <div class="box">&#9779;</div>
  416.     <div class="box">&#9780;</div>
  417.     <div class="box">&#9781;</div>
  418.     <div class="box">&#9782;</div>
  419.     <div class="box">&#9783;</div>
  420.     <div class="box">&#9791;</div>
  421.     <div class="box">&#9792;</div>
  422.     <div class="box">&#9793;</div>
  423.     <div class="box">&#9794;</div>
  424.     <div class="box">&#9795;</div>
  425.     <div class="box">&#9796;</div>
  426.     <div class="box">&#9797;</div>
  427.     <div class="box">&#9798;</div>
  428.     <div class="box">&#9799;</div>
  429.     <div class="box">&#9800;</div>
  430.     <div class="box">&#9801;</div>
  431.     <div class="box">&#9802;</div>
  432.     <div class="box">&#9803;</div>
  433.     <div class="box">&#9804;</div>
  434.     <div class="box">&#9805;</div>
  435.     <div class="box">&#9806;</div>
  436.     <div class="box">&#9807;</div>
  437.     <div class="box">&#9808;</div>
  438.     <div class="box">&#9809;</div>
  439.     <div class="box">&#9810;</div>
  440.     <div class="box">&#9811;</div>
  441.     <div class="clear"></div>
  442.   </div>
  443.   <div class="section-wrap">
  444.     <div class="section"><strong>Music Symbols</strong></div>
  445.     <div class="box">&#9833;</div>
  446.     <div class="box">&#9834;</div>
  447.     <div class="box">&#9835;</div>
  448.     <div class="box">&#9836;</div>
  449.     <div class="box">&#9837;</div>
  450.     <div class="box">&#9838;</div>
  451.     <div class="box">&#9839;</div>
  452.     <div class="clear"></div>
  453.   </div>
  454.   <div class="section-wrap">
  455.     <div class="section"><strong>WingDings</strong></div>
  456.     <div class="box">&#9825;</div>
  457.     <div class="box">&#9826;</div>
  458.     <div class="box">&clubs;</div>
  459.     <div class="box">&#9828;</div>
  460.     <div class="box">&hearts;</div>
  461.     <div class="box">&diams;</div>
  462.     <div class="box">&#9831;</div>
  463.     <div class="box">&#10003;</div>
  464.     <div class="box">&#10004;</div>
  465.     <div class="box">&#10007;</div>
  466.     <div class="box">&#10008;</div>
  467.     <div class="clear"></div>
  468.   </div>
  469.   <div class="section-wrap">
  470.     <div class="section"><strong>Fractions</strong></div>
  471.     <div class="box">&frac14;</div>
  472.     <div class="box">&frac12;</div>
  473.     <div class="box">&frac34;</div>
  474.     <div class="box">&frasl;</div>
  475.     <div class="box">&#8531;</div>
  476.     <div class="box">&#8532;</div>
  477.     <div class="box">&#8539;</div>
  478.     <div class="box">&#8540;</div>
  479.     <div class="box">&#8541;</div>
  480.     <div class="box">&#8542;</div>
  481.     <div class="clear"></div>
  482.   </div>
  483.   <div class="section-wrap">
  484.       <div class="section"><strong>Various</strong></div>
  485.       <div class="box">&#9650;</div>
  486.       <div class="box">&#9660;</div>
  487.       <div class="box">&#9824;</div>
  488.       <div class="box">&#9827;</div>
  489.       <div class="box">&#9829;</div>
  490.       <div class="box">&#9756; &#9758;</div>
  491.       <div class="box">&#9754; &#9755;</div>
  492.       <div class="box">&#9757;</div>
  493.       <div class="box">&#9759;</div>
  494.       <div class="box">&#9993;</div>
  495.       <div class="box">&#9997;</div>
  496.       <div class="box">&#9998;</div>
  497.       <div class="box">&#9999;</div>
  498.       <div class="box">&#10000;</div>
  499.       <div class="box">&#10001;</div>
  500.       <div class="box">&#10002;</div>
  501.       <div class="box">&#9742;</div>
  502.       <div class="box">&#9743;</div>
  503.       <div class="box">&#9992;</div>
  504.       <div class="box">&#9832;</div>
  505.       <div class="box">&#9986;</div>
  506.       <div class="box">&#9988;</div>
  507.       <div class="box">&#9762;</div>
  508.       <div class="box">&#9763;</div>
  509.       <div class="box">&#9996;</div>
  510.       <div class="box">&#13025;</div>
  511.       <div class="box">&#13019;</div>
  512.       <div class="box">&#9764;</div>
  513.       <div class="box">&#9749;</div>
  514.       <div class="box">&#9733;</div>
  515.       <div class="box">&#9734;</div>
  516.       <div class="box">&#9752;</div>
  517.       <div class="box">&#9789;</div>
  518.       <div class="box">&#9790;</div>
  519.       <div class="box">&#10051;</div>
  520.       <div class="box">&#10048;</div>
  521.       <div class="box">&#10049;</div>
  522.       <div class="box">&#10050;</div>
  523.       <div class="box">&#9977;</div>
  524.       <div class="box">&#10031;</div>
  525.       <div class="box">&#10016;</div>
  526.   </div>
  527. </div>
  528. </body>
  529. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.