This article is intended to help JuniperWeb users add icons to help with the design of their JuniperWeb page(s). The source code is a great way to edit content and add features to your webpage. Check out this FREE resource that teaches you have to code.

Where can I edit my source code in JuniperWeb?

As a JuniperWeb user, if you go into JuniperWeb -> Click on Websites -> Then select pages, that will direct you to the section where you can begin editing your webpages. 

Once you are in webpages section -> Click on the page you want to edit. In this case, I am going to be editing my footer page. 

Next, click on the paragraph editor and then hit the 3 dot button, which will show the <> source code button. Click on the <> button to begin editing within the source code. 

What is the code I should enter to display an icon next to my text? 

Below, you will see the code you want to enter in order for the icon to display. This code will need to be edited (links, customer CSS, and fonts) to fit the needs of the design of your website. This code will display as seen below ⬇

<div class="cms-row-wrapper" style="background: #f8f9fa !important;">
<div role="presentation" class="spacer" style="height: 20px;"></div>
<div id="" class="cms-nodes-wrapper container" style="text-align: center;">
<div class="row">
<div class="cms-image-wrapper col col-md-3">
<div><a href="/" class="btn btn-light" style="width: 100%; font-size: .85rem;"><i class="fas fa-home"></i> Home</a></div>
</div>
<div class="cms-image-wrapper col col-md-3">
<div><a href="/account/login" class="btn btn-light" style="width: 100%; font-size: .85rem;"><i class="fas fa-user-circle"></i> My Account</a></div>
</div>
<div class="cms-image-wrapper col col-md-3">
<div><a href="/pages/explore" class="btn btn-light" style="width: 100%; font-size: .85rem;"><i class="fas fa-shopping-cart"></i> Explore</a></div>
</div>
<div class="cms-image-wrapper col col-md-3">
<div><a href="/pages/contact" class="btn btn-light" style="width: 100%; font-size: .85rem;"><i class="fas fa-envelope"></i> Contact</a></div>
</div>
</div>
</div>
<div role="presentation" class="spacer" style="height: 20px;"></div>
</div>

What is the code for the icons? 

The code in red is the code you will want to copy and paste next to your content in order to show the icon. 

<i class="fas fa-home"></i> = Home Icon

<i class="fas fa-user-circle"></i> Silhouette of a Person Icon

<i class="fas fa-shopping-cart"></i> Shopping Card Icon

​<i class="fas fa-envelope"></i> Email Envelope Icon

Please make sure to save changes within your source code and then publish changes when you are done to see the changes on your live site. Make sure to preview the code before publishing in case there are errors or other items that need to change.