• Icons
  • Colors
  • Add-on Tips
<
>
  1. Drag the Embed Code from the build taskbar to where you want the Icon
  2. Click on the Embed Code to Set Custom HTML and click Edit Custom HTML
  3. Copy and Paste from the Code below depending on whether the Icon will need to contain a link and/or a custom color.
  4. Replace the Bold part of the fas fa-icons code with the icon from Font Awesome
  5. If linking website replace the bold-italics web address with the link
  6. If adding a custom color replace the bold-underlined hex code with the desired colors hex code. Crown's brand colors can be found here. Additional color hex codes can be found here.
Icon No Link
<!DOCTYPE html>
<html>
<head>

<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"  crossorigin="anonymous">

</head>
<body>

<div class="icons">
<a class="fas fa-icons"
style="font-size:60px;text-decoration: none;text-shadow:1px 1px 2px #666666;"></a>
</div>

</body>
<br>
</html>
This HTML code creates this icon.

Font Awesome Icons

Icon Link
<!DOCTYPE html>
<html>
<head>

<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" crossorigin="anonymous">
</head>
<body>

<div class="icons">
<a href="https://www.crownlibrary.com/"
class="fas fa-book-open"
style="font-size:60px;text-shadow:1px 1px 2px #666666;">
</a>
<div>

</body>
<br>
</html>
This HTML code creates this icon.

Font Awesome Icons

Icon No Link Color Change
<!DOCTYPE html>
<html>
<head>

<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"  crossorigin="anonymous">

</head>
<body>

<div>
<a class="fas fa-icons"
style="color:#00b1e2;
font-size:60px;text-decoration: none;text-shadow:1px 1px 2px #666666;"></a>
</div>

</body>
<br>
</html>
This HTML code creates this icon.

Font Awesome Icons

Icon Link Color Change
<!DOCTYPE html>
<html>
<head>

<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" crossorigin="anonymous">
</head>
<body>

<div>
<a href="https://www.crownlibrary.com/"
class="fa fa-book-open"
style="color:#00b1e2;
text-decoration: none;
font-size:60px;
text-shadow:1px 1px 2px #666666;">
</a>
<div>

</body>
<br>
</html>
This HTML code creates this icon.

Font Awesome Icons
The Purple color Code for the Website is #5c068c
The white Background code is #ffffff
The Dark Gray background is #63666a
The light gray background is #d1d1d1
The current color Theme is the BLUE in the theme selector. The old theme was YELLOW.
Tabs
  • A maximum of five Tabs is recommended otherwise additional tabs might go unnoticed
  • Recommended Settings:
    • Style: Material or Simple
    • Active Tab:  #bbbcbc
    • Inactive Tab: #ffffff
    • Border: #bbbcbc
  • The settings should be matched to best flow with the page, so keep that in mind.
Accordion
  • Do not unless absolutely necessary to put accordions inside accordions. The reason is because the inner accordion does not display correctly. (There is a way around this, where you have the accordion section with the inner accordion open in the editor; however, if multiple sections have accordions within this method can only fix one section.)
  • Recommended Settings:
    • Style: Material or Simple
    • Backgrounds: #ffffff
  • The settings should be matched to best flow with the page, so keep that in mind.
  • Here is the Weebly page so you can read more about it.
This is some Text