Font Awesome on HackMD

###### tags: `tutorials` `features` `icons` `resource` # Font Awesome on HackMD A complete list of eligible Font Awesome icons can be found at [this Github page](https://github.com/zackexplosion/HackMD/blob/master/public/vendor/font-awesome/scss/_icons.scss). Font Awesome icons can be added into notes with the following code: ```html ``` where `ICON` refers to icon-specific strings that will generate the icon (a full list is provided further down). Nothing needs to go between the HTML tags; anything placed there will be placed right after the icon. ## Available icons Multiple strings that call the same icon are separated by commas. adjust adn align-center align-justify align-left align-right ambulance anchor android angellist angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up apple archive area-chart arrow-circle-down arrow-circle-left arrow-circle-right arrow-circle-up arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v asterisk at automobile, car backward ban bank, institution bar-chart, bar-chart-o barcode bars, navicon, reorder bed, hotel beer behance behance-square bell bell-o bell-slash bell-slash-o bicycle binoculars birthday-cake bitbucket bitbucket-square bitcoin, btc bold bolt, flash bomb book bookmark bookmark-o briefcase bug building building-o bullhorn bullseye bus buysellads cab, taxi calculator calendar calendar-o camera camera-retro caret-down caret-left caret-right caret-up caret-square-o-down, toggle-down caret-square-o-left, toggle-left caret-square-o-right, toggle-right caret-square-o-up, toggle up cart-arrow-down cart-plus cc cc-amex cc-discover cc-mastercard cc-paypal cc-stripe cc-visa certificate chain, link chain-broken, unlink check check-circle check-circle-o check-square check-square-o chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up chevron-down chevron-left chevron-right chevron-up child circle circle-o circle-o-notch circle-thin clipboard, paste clock-o close, remove, times cloud cloud-download cloud-upload cny, jpy, rmb, yen code code-fork codepen coffee cog, gear cogs, gears columns comment comment-o comments comments-o compass compress connectdevelop copy, files-o copyright credit-card crop crosshairs css3 cube cubes cut, scissors cutlery dashboard, tachometer dashcube database dedent, outdent delicious desktop deviantart diamond digg dollar, usd dot-circle-o download dribbble dropbox drupal edit, pencil-square-o eject ellipsis-h ellipsis-v empire, ge envelope envelope-o envelope-square eraser eur, euro exchange exclamation exclamation-circle exclamation-triangle, warning expand external-link external-link-square eye eyedropper eye-slash facebook, facebook-f facebook-official facebook-square fast-backward fast-forward fax female fighter-jet file file-archive-o, file-zip-o file-audio-o, file-sound-o file-code-o file-excel-o file-image-o, file-photo-o, file-picture-o file-movie-o, video-o file-o file-pdf-o file-powerpoint-o file-text file-text-o file-video-o file-word-o film filter fire fire-extinguisher flag flag-checkered flag-o flask flickr floppy-o, save folder folder-o folder-open folder-open-o font forumbee forward foursquare frown-o futbol-o, soccer-o gamepad gavel, legal gbp genderless, gift git github github-alt github-square git-square gittip, gratipay glass globe google google-plus google-plus-square google-wallet graduation-cap, mortar-board group, users hacker-news hand-o-down hand-o-left hand-o-right hand-o-up hdd-o header headphones heart heartbeat heart-o history home hospital-o h-square html5 ils, shekel, sheqel image, picture-o inbox indent info info-circle inr, rupee instagram ioxhost italic joomla jsfiddle key keyboard-o krw, won language laptop lastfm lastfm-square leaf leanpub lemon-o level-down level-up life-bouy, life-buoy, life-ring life-saver, support lightbulb-o line-chart linkedin linkedin-square linux list list-alt list-ol list-ul location-arrow lock long-arrow-down long-arrow-left long-arrow-right long-arrow-up magic magnet mail-forward, share mail-reply, reply mail-reply-all, reply-all male map map-marker mars mars-double mars-stroke mars-stroke-h mars-stroke-v maxcdn meanpath medium medkit meh-o mercury microphone microphone-slash minus minus-circle minus-square minus-square-o mobile, mobile-phone money moon-o motorcycle music neuter newspaper-o openid pagelines paint-brush paperclip paper-plane, send paper-plane-o, send-o paragraph pause paw paypal pencil pencil-square phone phone-square pie-chart pied-piper pied-piper-alt pinterest pinterest-p pinterest-square plane play play-circle play-circle-o plug plus plus-circle plus-square plus-square-o power-off print puzzle-piece qq qrcode question question-circle quote-left quote-right ra, rebel random recycle reddit reddit-square refresh renren repeat, rotate-right retweet road rocket rotate-left, undo rouble, rub, ruble rss rss-square search search-minus search-plus sellsy server share-alt share-alt-square share-square share-square-o shield ship shirtsinbulk shopping-cart signal sign-in sign-out simplybuilt sitemap skyatlas skype slack sliders slideshare smile-o sort, unsorted sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc, sort-up sort-desc, sort-down sort-numeric-asc sort-numeric-desc soundcloud space-shuttle spoon spotify square square-o stack-exchange stack-overflow star star-half star-half-empty, star-half-full, star-half-o star-o steam steam-square step-backward step-forward stethoscope stop street-view strikethrough stumbleupon stumbleupon-circle subscript subway suitcase sun-o superscript table tablet tag tags tasks tencent-weibo terminal text-height text-width th th-large th-list thumbs-down thumbs-o-down thumbs-o-up thumbs-up thumb-tack ticket times-circle times-circle-o tint toggle-off toggle-on train transgender transgender-alt trash trash-o tree trello trophy truck try, turkish-lira tty tumblr tumblr-square twitch twitter twitter-square umbrella underline undo university unlock unlock-alt upload user user-md user-plus users user-secret user-times venus venus-double venus-mars viacoin video-camera vimeo-square vine vk volume-down volume-off volume-up wechat, weixin weibo whatsapp wheelchair wifi windows wordpress wrench xing xing-square yahoo yelp youtube youtube-play youtube-square ## Icon manipulation There are a few things you can do to change up icons. A more comprehensive list can be found [here](https://fontawesome.com/v4/examples/). ### Resizing Icons can be resized. Possible parameters include `lg`, `2x`, `3x`, `4x`, and `5x`. ```html ``` ### Stacking Icons can be stacked on top of each other. ```html ``` ### Animated Icons can be animated. They can rotate clockwise smoothly with `fa-spin` or rotate discretely 8 times clockwise with `fa-pulse`. ```html ``` ```html ``` ### Colour Icons can be colored with typical span elements. ```html ``` ### Transformations Icons can be rotated clockwise by `90`, `180`, or `270` degrees. ```html ``` ```html ``` ```html ``` They can also be flipped horizontally or vertically. ```html ``` ```html ``` ### Borders Icons can have borders around them. Note that the thickness is very thin. ```html ``` ### Pulling Text can be wrapped around an icon. It can be pulled to the left with `fa-pull-left` or to the right with `fa-pull-right`. ```html This is text that is going to wrap around the right quotation mark. When it gets to the quotation mark it will wrap around it, making it look like a cool word wrapping scheme. The larger size is used to make it more apparent that there is word wrapping with more wrapping. ``` This is text that is going to wrap around the right quotation mark. When it gets to the quotation mark it will wrap around it, making it look like a cool word wrapping scheme. The larger size is used to make it more apparent that there is word wrapping with more wrapping. ### Lists Icons can be used as bullet points. ```html <ul class="fa-ul"> <li>Here's one <li>Another one <li>And a final one. </li> </ul> ``` <ul class="fa-ul"> <li>Here's one <li>Another one <li>And a final one. </li> </ul>