Electronics Theme for Magento 2...Electronics Theme for Magento 2 User manual Prepare Magento 2...

35
A more user friendly version of this manual can be found here. (https://pagayo.com/magento-2- themes/manual/magento-2-electronics-manual.html) Electronics Theme for Magento 2 User manual Prepare Magento 2 Installation 1. Download the theme from your account at magento.com or pagayo.com. 2. Unzip the .zip file you downloaded 3. Remove the wysiwyg.zip file, but do not delete it 4. Upload the files that are in the .zip to your server and add them to the Magento root folder 5. Now unzip the wysiwyg.zip file and upload the folder that is in it to /pub/media/ 6. In your Magento backend go to Content > Themes 7. If you see the Pagayo theme, you have done the upload correct 8. Go to Stores > Configuration > General > Design > Design Theme 9. Select the Pagayo Theme 10. Click Safe Config

Transcript of Electronics Theme for Magento 2...Electronics Theme for Magento 2 User manual Prepare Magento 2...

A more user friendly version of this manual can be found here. (https://pagayo.com/magento-2-themes/manual/magento-2-electronics-manual.html)

Electronics Theme for Magento 2 User manual

Prepare Magento 2

Installation

1. Download the theme from your account at magento.com or pagayo.com.2. Unzip the .zip file you downloaded3. Remove the wysiwyg.zip file, but do not delete it4. Upload the files that are in the .zip to your server and add them to the Magento root folder5. Now unzip the wysiwyg.zip file and upload the folder that is in it to /pub/media/6. In your Magento backend go to Content > Themes7. If you see the Pagayo theme, you have done the upload correct

8. Go to Stores > Configuration > General > Design > Design Theme9. Select the Pagayo Theme

10. Click Safe Config

Change / Update Magento 2 Logo

1. Go to Stores > Configuration > General > Design > Header2. Click Choose file3. Add the width and the height of your logo4. Click Safe Config

Installation

1. Download the theme from your account at pagayo.com. To your download page(https://pagayo.com/store/downloadable/customer/products/).

2. Unzip the .zip file you downloaded3. Upload the files that are in the .zip to your server and add them to the Magento root folder4. In your Magento backend go to Content > Themes5. If you see the Pagayo theme, you have done the upload correct

6. Go to Stores > Configuration > General > Design > Design Theme7. Select the Pagayo Theme8. Click Safe Config

Footer

Social Footer1. Go to Content > Blocks and add new block

2. Add Block Title "Social Footer3. Add Identifier social-footer4. Select your store view (almost always "All Store Views")5. Make sure you select "Hide Editor"6. Add Content <div class="row"> <div class="footer1"> <div class="col-md-8 newsletter"> <p class="newsletter_title">NEWSLETTER</p> {{block class="Magento\Framework\View\Element\Template" name="subscribe"template="Magento_Newsletter::html/subscribe.phtml"}}</div> <div class="col-md-4 social"> <p class="social_title">FOLLOW US</p> <a href="#"><em class="fa fa-facebook-square"></em></a> <a href="#"><emclass="fa fa-pinterest-square"></em></a> <em class="fa fa-twitter-square"></em></a> <a href="#"><em class="fa fa-google-plus-square"></em></a> <ahref="#"><em class="fa fa-instagram"></em></a> <a href="#"><em class="fafa-youtube-square"></em></a></div> </div> </div>

7. Click Save Block

Main Footer

Main Footer1. Go to Content > Blocks and add new block

2. Add Block Title "Main Footer3. Add Identifier main-footer4. Select your store view (almost always "All Store Views")5. Make sure you select "Hide Editor"6. Add Content <div class="row footer2"> <div class="col-md-3"><span>My Account</span> <div class="block-content"> <ul class="links"> <li><em class="fa fa-caret-right"></em><a title="About us" href="#">Aboutus</a></li> <li><em class="fa fa-caret-right"></em><a title="Contact us"href="#">Contact us</a></li> <li><em class="fa fa-caret-right"></em><a title="My account" href="#">Myaccount</a></li> <li><em class="fa fa-caret-right"></em><a title="Orders history"href="#">Orders history</a></li> <li><em class="fa fa-caret-right"></em><a title="Advanced search"href="#">Advanced search</a></li> </ul>

<p class="block1"><span>Pagayo Customer Review</span> </br></br> Amazing theme and amazing support. We have had a few questions and customchanges we wanted to make and the team at Pagayo were so fast to respondand help us. Would definitely recommend this theme and this company!</br></br></p> </div> </div> <div class="col-md-3"><span>Contact Information</span> <div class="block-content"> <ul class="contact-info"> <li><em class="fa fa-map-marker"></em> <p><strong>Address:</strong><br />123 Street Name, City, England</p> </li> <li><em class="fa fa-phone"></em> <p><strong>Phone:</strong><br />(123) 456-7890</p> </li> <li><em class="fa fa-envelope-o"></em> <p><strong>Email:</strong><br /><ahref="mailto:[email protected]">[email protected]</a></p> </li> <li><em class="fa fa-clock-o"></em> <p><strong>Working Days/Hours:</strong><br />Mon - Sun / 9:00AM -8:00PM</p> </li> </ul> </div> {{widget type="Magento\Catalog\Block\Product\Widget\NewWidget"display_type="all_products" products_count="5"template="product/widget/column/new_names_list.phtml"}} </div> <div class="col-md-3"><span>Main Features</span> <div class="block-content"> <ul class="features"> <li><em class="fa fa-thumbs-o-up"></em><a href="#">Super Fast MagentoTheme</a></li> <li><em class="fa fa-thumbs-o-up"></em><a href="#">1st Fully working AjaxTheme</a></li> <li><em class="fa fa-thumbs-o-up"></em><a href="#">10 Unique HomepageLayouts</a></li> <li><em class="fa fa-thumbs-o-up"></em><a href="#">Powerful Admin Panel</a></li> <li><em class="fa fa-thumbs-o-up"></em><a href="#">Mobile &amp; RetinaOptimized</a></li> </ul> </div> <img src="{{media url="wysiwyg/pt205/pt205-agent.png"}}" alt="" class="img-circle" /> </div>

<div class="col-md-3 returns"> {{widget type="Magento\Sales\Block\Widget\Guest\Form"template="widget/guest/form.phtml"}} </div> </div>

Payment Footer1. Go to Content > Blocks and add new block

2. Add Block Title "Payment Footer3. Add Identifier payment-footer4. Select your store view (almost always "All Store Views")5. Make sure you select "Hide Editor"6. Add Content <div class="row"> <div class="col-md-8"> <div class="footer_last"> <ul class="links"> <li class="first"><a href="/about-magento-demo-store/">About Us</a></li> <li><a href="/customer-service/">Customer Service</a></li> <li><a href="/contacts/">Contact Us</a></li> <li><a href="/catalogsearch/advanced/">Advanced Search</a></li> <li><a href="/catalogsearch/term/popular/">Search Terms</a></li>

<li><a href="/catalog/seo_sitemap/category/">Sitemap</a></li> <li><a class="link-rss" href="/rss/">RSS</a></li> <li><a href="/sales/guest/form/">Orders and Returns</a></li> <li class="last privacy"><a href="/privacy-policy-cookie-restriction-mode/">Privacy Policy</a></li> </ul> </div> </div> <div class="col-md-4"> <div class="footer-payments"> <ul class="payment-icons"> <li><img src="{{media url="wysiwyg/pt205/icon-payment-paypal.png"}}"alt="payPal" /></li> &nbsp; <li><img src="{{media url="wysiwyg/pt205/icon-payment-visa.png"}}"alt="Visa" /></li> &nbsp; <li><img src="{{media url="wysiwyg/pt205/icon-payment-mastercard.png"}}"alt="MasterCard" /></li> &nbsp; <li><img src="{{media url="wysiwyg/pt205/icon-payment-amex.png"}}"alt="Amercian Express" /></li> </ul> </div> </div> </div>

Social Footer Widget1. Go to Content > Widgets and add new widget2. Select Type "CMS Static Block"3. Select Design Package/Theme "Pagayo Theme"

4. Click "Continue"5. Add Widget Title "Social Footer6. Select your store view (almost always "All Store Views")7. Display on Select "All Pages"8. Container Select "Before Page Footer"

9. Click "Widget Options"10. Click "Select Block"11. Select the block called Social Footer

Main Footer Widget1. Go to Content > Widgets and add new widget2. Select Type "CMS Static Block"3. Select Design Package/Theme "Pagayo Theme"

4. Click "Continue"5. Add Widget Title "Main Footer"6. Select your store view (almost always "All Store Views")7. Display on Select "All Pages"8. Container Select "Page Footer Container"9. Click "Widget Options"

10. Click "Select Block"

11. Select the block called Main Footer

Payment Footer Widget1. Go to Content > Widgets and add new widget2. Select Type "CMS Payment Block"3. Select Design Package/Theme "Pagayo Theme"

4. Click "Continue"5. Add Widget Title "Payment Footer"6. Select your store view (almost always "All Store Views")7. Display on Select "All Pages"8. Container Select "Page Bottom"9. Click "Widget Options"

10. Click "Select Block"11. Select the block called Payment Footer

Home

1. Go to Content > Pages2. Select the page with URL key home. If it is not there, click "Add New Page"3. Add your page title4. The URL key has to be "home"5. Select your store view (almost always "All Store Views")6. Click "Content"7. Make sure you select "Hide Editor"8. Add content <div class="container home"> <div class="usp"> <div class="well"> <div class="row"> <div class="col-md-4"><em class="fa fa-truck ups-brown"></em> <h5>FREE SHIPPING &amp; RETURN</h5> <p>Free shipping on orders over $99.</p> </div> <div class="col-md-4"><em class="fa fa-money dollar-green"></em> <h5>MONEY BACK GUARANTEE</h5> <p>100% money back guarantee.</p> </div>

<div class="col-md-4-last"><em class="fa fa-comment skype-blue"></em> <h5>ONLINE SUPPORT 24/7</h5> <p>We are there to help you</p> </div> </div> </div> </div> <div class="row row-home-one"> <div class="col-md-8"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"> <li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol><!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"><img src="{{media url="wysiwyg/pt205/home-slide-1.jpg"}}" alt="" /> <div class="carousel-caption"> <h3>The New iPhone 6</h3> <p>Come and Get it</p> </div> </div> <div class="item"><img src="{{media url="wysiwyg/pt205/home-slide-2.jpg"}}"alt="" /> <div class="carousel-caption"> <h3>Windows 10</h3> <p>We Love It</p> </div> </div> <div class="item"><img src="{{media url="wysiwyg/pt205/home-slide-3.jpg"}}"alt="" /> <div class="carousel-caption"> <h3>Samsung</h3> <p>It doesn't take a genius!</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="sr-only">Previous</span> </a> <aclass="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="sr-only">Next</span> </a></div> </div> <div class="col-md-4"><img src="{{media url="wysiwyg/pt205/home-adobe.jpg"}}" alt="" /></div> </div> <hr class="style-two" /> <div class="row row-home-two">

<div class="col-md-4"><img src="{{media url="wysiwyg/pt205/pt004-home-box1.jpg"}}" alt="" /></div> <div class="col-md-4"><img src="{{media url="wysiwyg/pt205/pt004-home-box2.jpg"}}" alt="" /></div> <div class="col-md-4"><img src="{{media url="wysiwyg/pt205/pt004-home-box3.jpg"}}" alt="" /></div> </div> <hr class="style-two" /> <div class="newgrid">insertwidget</div> <hr class="style-two" /> <div class="row"> <div class="col-md-3 free-gift"> <h5>This month only!!</h5> <p>Get a free gift on every order over $150.00</p> <em class="fa fa-gift"></em></div> <div class="col-md-3 usp-blocks"><em class="fa fa-users"></em> <h6>DEDICATED SERVICE</h6> <p>Consult our specialists for help with an order, customization, or designadvice.</p> <p><a href="#">Get in Touch &gt;</a></p> </div> <div class="col-md-3 usp-blocks"><em class="fa fa-thumbs-up"></em> <h6>DEDICATED SERVICE</h6> <p>Consult our specialists for help with an order, customization, or designadvice.</p> <p><a href="#">Get in Touch &gt;</a></p> </div> <div class="col-md-3 usp-blocks"><em class="fa fa-globe"></em> <h6>DEDICATED SERVICE</h6> <p>Consult our specialists for help with an order, customization, or designadvice.</p> <p><a href="#">Get in Touch &gt;</a></p> </div> </div> <div class="jumbotron"> <h1>Theme example</h1> <p>Sed varius congue cursus. Praesent id finibus sem, a scelerisque libero.Fusce euismod, ex vel dapibus ullamcorper, felis purus posuere nisi, acvenenatis odio tellus vitae ante. Cum sociis natoque penatibus et magnisdis parturient montes, nascetur ridiculus mus. Nunc ante augue, bibendum atmattis in, lobortis eget ex. Nulla laoreet non est eu euismod. Proin seddictum leo. Maecenas fringilla enim in pretium gravida. Pellentesque cursusleo eu velit semper condimentum. Quisque ante ante, placerat a finibus non,sagittis id turpis. Morbi ut quam nec felis ultrices malesuada ac eu justo.Nullam quam ante, tempus vitae convallis vitae, rutrum sit amet lectus.Phasellus eu porta elit. Pellentesque venenatis felis at urna congue, idlobortis lorem vestibulum. Pellentesque dui massa, blandit a ipsumimperdiet, blandit imperdiet mi. Nam sed sem non sapien laoreet suscipitultricies nec mi.</p>

</div> </div>

9. Click "Save and Continue Edit"10. Click "Show / Hide Editor"11. Scroll down to "insertwidget"

12. Dubble click "insertwidget" to select it13. Click the "Inster Widget" icon. It is the one with the Magento logo

14. Select Widget Type "Catalog New Products List"15. Number of Products to Display add "5"16. Template Select "New Products Grid Template"17. Click "Insert Widget"18. Click "Save Page"

Slider / Carousel

1. Go to Content > Pages2. Select the page with URL key home.3. If you do not see the editor. Click "Show / Hide Editor"4. Select and replace the images you see one by one5. Below the images you see the text that is shown in the images, you can update that6. Click "Save Page"

Customising your Magento2 theme

I would suggest you never overwrite core files and theme files. It is much better to use/createyour own files. I will show you how to do that here.

1. Use your FTP client2. Go to /app/design/frontend/Pagayo/pt205/Magento_Theme/layout/ and opendefault_head_blocks.xml

3. Add your own css file name. See image below. Change "yourname" in something else.4. Go to /app/design/frontend/Pagayo/pt205/web/css/ and create/change yourname-custom.css Change "yourname" in the same as you did in the .xml above.

5. Now you can make your own css changes in this new .css file. See image below.6. When your shop is going live you should deploy your static files again.

Font Awesome Icons

Font Awesome Icons are the little images you see. Like on the homepage you see the browntruck, the green bill and the blue cloud. It is very simple to change these to any of the FontAwesome Icons shown below. If you need more information, please go to the Font AwesomeIcons website.

Font Awesome Icons (http://fontawesome.io/icons/)

Below you see the dollar bill example from the homepage. Replace "money" with"automobile" and you will see a car and not the dollar bill.

<em class="fa fa-money dollar-green"></em>

<em class="fa fa-automobile dollar-green"></em>

The color is not part of Font Awesome Icons. You can use it or not. Delete for exampledollar-green and you will see the original font color of your site. You can also add your owncolor from the Magento backend by adding a span. And if you do not want to use HEXcolors you can also add colors, but that will limit you a lot.

<em class="fa fa-money dollar-green"></em>

<em class="fa fa-automobile"></em>

<span style="color: #ff0000;"><em class="fa fa-certificate"></em></span>

<span style="color:blue;"><em class="fa fa-star"></em></span>

Make sure to disable the Editor by clicking "Show / Hide editor" before you change or addFont Awesome Icons

20 New Icons in 4.5 bluetooth bluetooth-b codiepie

Web Application Icons

credit-card-alt edge fort-awesome hashtag mixcloud modx pause-circle pause-circle-o percent product-hunt reddit-alien scribd shopping-bag shopping-basket stop-circle stop-circle-o usb

adjust anchor archive area-chart arrows arrows-h arrows-v asterisk at automobile (alias) balance-scale ban bank (alias) bar-chart bar-chart-o (alias) barcode bars battery-0 (alias) battery-1 (alias) battery-2 (alias) battery-3 (alias) battery-4 (alias) battery-empty battery-full battery-half battery-quarter

battery-three-quarters bed beer bell bell-o bell-slash bell-slash-o bicycle binoculars birthday-cake bluetooth bluetooth-b bolt bomb book bookmark bookmark-o briefcase bug building building-o bullhorn bullseye bus cab (alias) calculator calendar calendar-check-o calendar-minus-o calendar-o calendar-plus-o calendar-times-o camera camera-retro car caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up cart-arrow-down cart-plus cc certificate check check-circle check-circle-o check-square check-square-o child

circle circle-o circle-o-notch circle-thin clock-o clone close (alias) cloud cloud-download cloud-upload code code-fork coffee cog cogs comment comment-o commenting commenting-o comments comments-o compass copyright creative-commons credit-card credit-card-alt crop crosshairs cube cubes cutlery dashboard (alias) database desktop diamond dot-circle-o download edit (alias) ellipsis-h ellipsis-v envelope envelope-o envelope-square eraser exchange exclamation exclamation-circle exclamation-triangle external-link

external-link-square eye eye-slash eyedropper fax feed (alias) female fighter-jet file-archive-o file-audio-o file-code-o file-excel-o file-image-o file-movie-o (alias) file-pdf-o file-photo-o (alias) file-picture-o (alias) file-powerpoint-o file-sound-o (alias) file-video-o file-word-o file-zip-o (alias) film filter fire fire-extinguisher flag flag-checkered flag-o flash (alias) flask folder folder-o folder-open folder-open-o frown-o futbol-o gamepad gavel gear (alias) gears (alias) gift glass globe graduation-cap group (alias) hand-grab-o (alias) hand-lizard-o hand-paper-o

hand-peace-o hand-pointer-o hand-rock-o hand-scissors-o hand-spock-o hand-stop-o (alias) hashtag hdd-o headphones heart heart-o heartbeat history home hotel (alias) hourglass hourglass-1 (alias) hourglass-2 (alias) hourglass-3 (alias) hourglass-end hourglass-half hourglass-o hourglass-start i-cursor image (alias) inbox industry info info-circle institution (alias) key keyboard-o language laptop leaf legal (alias) lemon-o level-down level-up life-bouy (alias) life-buoy (alias) life-ring life-saver (alias) lightbulb-o line-chart location-arrow lock magic magnet

mail-forward (alias) mail-reply (alias) mail-reply-all (alias) male

map map-marker map-o map-pin map-signs meh-o microphone microphone-slash minus minus-circle minus-square minus-square-o mobile mobile-phone (alias) money moon-o mortar-board (alias) motorcycle mouse-pointer music navicon (alias) newspaper-o object-group object-ungroup paint-brush paper-plane paper-plane-o paw pencil pencil-square pencil-square-o percent phone phone-square photo (alias) picture-o pie-chart plane plug plus plus-circle plus-square plus-square-o

power-off print puzzle-piece qrcode question question-circle quote-left quote-right random recycle refresh registered remove (alias) reorder (alias) reply reply-all retweet road rocket rss rss-square search search-minus search-plus send (alias) send-o (alias) server share share-alt share-alt-square share-square share-square-o shield ship shopping-bag shopping-basket shopping-cart sign-in sign-out signal sitemap sliders smile-o soccer-ball-o (alias) sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc

sort-asc sort-desc sort-down (alias) sort-numeric-asc sort-numeric-desc sort-up (alias) space-shuttle spinner spoon square square-o star star-half star-half-empty (alias) star-half-full (alias) star-half-o star-o sticky-note sticky-note-o street-view suitcase sun-o support (alias) tablet tachometer tag tags tasks taxi television terminal thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o tint toggle-down (alias) toggle-left (alias) toggle-off toggle-on toggle-right (alias) toggle-up (alias) trademark trash

Hand Icons

Transportation Icons

trash-o tree trophy truck tty tv (alias) umbrella university unlock unlock-alt unsorted (alias) upload user user-plus user-secret user-times users video-camera volume-down volume-off volume-up warning (alias) wheelchair wifi wrench

hand-grab-o (alias) hand-lizard-o hand-o-down hand-o-left hand-o-right hand-o-up hand-paper-o hand-peace-o hand-pointer-o hand-rock-o hand-scissors-o hand-spock-o hand-stop-o (alias) thumbs-down thumbs-o-down thumbs-o-up thumbs-up

Transportation Icons

Gender Icons

File Type Icons

ambulance automobile (alias) bicycle bus cab (alias) car fighter-jet motorcycle plane rocket ship space-shuttle subway taxi train truck wheelchair

genderless intersex (alias) mars mars-double mars-stroke mars-stroke-h mars-stroke-v mercury neuter transgender transgender-alt venus venus-double venus-mars

file file-archive-o file-audio-o file-code-o

Spinner Icons

Form Control Icons

Payment Icons

file-excel-o file-image-o file-movie-o (alias) file-o file-pdf-o file-photo-o (alias) file-picture-o (alias) file-powerpoint-o file-sound-o (alias) file-text file-text-o file-video-o file-word-o file-zip-o (alias)

These icons work great with the fa-spin class. Check out the spinning icons example(http://fontawesome.io/examples/#animated).

circle-o-notch cog gear (alias) refresh spinner

check-square check-square-o circle circle-o dot-circle-o minus-square minus-square-o plus-square plus-square-o square square-o

Chart Icons

Currency Icons

cc-amex cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa credit-card credit-card-alt google-wallet paypal

area-chart bar-chart bar-chart-o (alias) line-chart pie-chart

bitcoin (alias) btc cny (alias) dollar (alias) eur euro (alias) gbp gg gg-circle ils inr jpy krw money rmb (alias) rouble (alias) rub ruble (alias) rupee (alias) shekel (alias)

Text Editor Icons

sheqel (alias) try turkish-lira (alias) usd won (alias) yen (alias)

align-center align-justify align-left align-right bold chain (alias) chain-broken clipboard columns copy (alias) cut (alias) dedent (alias) eraser file file-o file-text file-text-o files-o floppy-o font header indent italic link list list-alt list-ol list-ul outdent paperclip paragraph paste (alias) repeat rotate-left (alias) rotate-right (alias) save (alias) scissors

Directional Icons

strikethrough subscript superscript table

text-height text-width th th-large th-list underline undo unlink (alias)

angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right

Video Player Icons

caret-square-o-up caret-up chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up chevron-down chevron-left chevron-right chevron-up exchange hand-o-down hand-o-left hand-o-right hand-o-up long-arrow-down long-arrow-left long-arrow-right long-arrow-up toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias)

arrows-alt backward compress eject expand fast-backward fast-forward forward pause pause-circle pause-circle-o play play-circle play-circle-o random step-backward step-forward stop stop-circle stop-circle-o

Brand Icons

Warning!Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove SocialMedia Buttons" setting. We will not use hacks to force them to display. Please report an issuewith Adblock Plus (https://adblockplus.org/en/bugs) if you believe this to be an error. To workaround this, you'll need to modify the social icon class names.

youtube-play

500px adn amazon android angellist apple behance behance-square bitbucket bitbucket-square bitcoin (alias) black-tie bluetooth bluetooth-b btc buysellads cc-amex cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa chrome codepen codiepie connectdevelop contao css3 dashcube delicious deviantart digg

dribbble dropbox drupal edge empire expeditedssl facebook facebook-f (alias) facebook-official facebook-square firefox flickr fonticons fort-awesome forumbee foursquare ge (alias) get-pocket gg gg-circle git git-square github github-alt github-square gittip (alias) google google-plus google-plus-square google-wallet gratipay hacker-news houzz html5 instagram internet-explorer ioxhost joomla jsfiddle lastfm lastfm-square leanpub linkedin linkedin-square linux maxcdn meanpath medium mixcloud

modx odnoklassniki odnoklassniki-square opencart openid opera optin-monster pagelines paypal pied-piper pied-piper-alt pinterest pinterest-p pinterest-square product-hunt qq ra (alias) rebel reddit reddit-alien reddit-square renren safari scribd sellsy share-alt share-alt-square shirtsinbulk simplybuilt skyatlas skype slack slideshare soundcloud spotify stack-exchange stack-overflow steam steam-square stumbleupon stumbleupon-circle tencent-weibo trello tripadvisor tumblr tumblr-square twitch twitter twitter-square

All brand icons are trademarks of their respective owners.The use of these trademarks does not indicate endorsement of the trademark holder byFont Awesome, nor vice versa.Brand icons should only be used to represent the company or product to which they refer.

Medical Icons

usb viacoin vimeo vimeo-square vine vk wechat (alias) weibo weixin whatsapp wikipedia-w windows wordpress xing xing-square y-combinator y-combinator-square (alias) yahoo yc (alias) yc-square (alias) yelp youtube youtube-play youtube-square

ambulance h-square heart heart-o heartbeat hospital-o medkit plus-square stethoscope user-md wheelchair