iconic documentation

Introduction

Thank you for purchasing iconic theme! We’re glad that you found what you were looking for. It is our goal that you are always happy with what you bought from us, and We hope that you will be able to create an outstanding website with our theme easily.

Before proceeding with the theme installation, It is recommended that you follow the steps listed below. We have covered all kinds of necessary information, and provide you with all the guidelines and details that you will need to use iconic theme. If you can’t find the answer you’re looking for, We encourage you to reach us through our Support portal. We'll be glad to help you out in your queries.

Installation

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /template folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
Below is the folder structure and needs to be uploaded to your website root directory:
- html
  Includes all assets and html files, used in theme
  - css
    Includes all .css files, used in theme
  - img
    Includes all images, used in .html files.
  - font awesome
    Includes font icon .css files, used in theme
  - js
    Includes plugin's initialization file
  - slick
    Includes all slick slider .css and js files, used in theme
  - particles
    Includes all particles-js .css and js files, used in theme
  - baguette box
    Includes baguette-box-js .css and js files, used in theme for filtering the item through price
  - elements
    Includes all elements or shortcodes
You should upload all or specific HTML files as per your need.
You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

HTML Structure

iconic follows a simple and easy to customize coding structure. Here is the sample for your reference:

<!doctype html>
    <html>
        <head>
            <!-- title -->
            <meta charset="utf-8">
            <!-- description -->
            <meta name="description" content="">
            <!-- keywords -->
            <meta name="keywords" content="">
            <!-- favicon -->
            <!-- style -->
            <!-- bootstrap css -->
            <!-- theme css -->
            <!-- custom css -->
        </head>
        <body>
            <!-- header start -->
            <header>
                <!-- navigation start  -->
                    <nav class="navbar navbar-expand-lg fixed-top navbar-light">
                                ...
                    </nav>
                <!-- navigation end -->
            </header>
            <!-- header end -->
            <!-- sections start -->
                <section>
                    ...
                </section>
            <!-- sections end -->
            <!-- footer start --> 
                <footer>
                                
                </footer>
            <!-- footer end -->
            <!-- javascript & css libraries -->
    </body>
</html>

Logo Settings

The Logo Container can be found in the Header --> Nav --> Container - .navbar-brand

<a class="navbar-brand" href="index.html">
    <img src="img/logo.png" alt="" />
</a>

Image & Favicon Settings

Image Settings
iconic download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like img/yourimage.jpg

<img src="image path" alt="image alt text">

Favicon Settings
To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

<!-- favicon -->
<link rel="shortcut icon" href="img/favicon.png">
<link rel="apple-touch-icon" href="img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

Changing Fonts

By default, iconic uses the Google fonts. In case, If you want to change font to any other Google fonts. You can change the fonts from /css/style.css file in below lines.

/* Google font */
@import url(https://fonts.googleapis.com/css?family=Montserrat|Montserrat+Alternates|Open+Sans|Open+Sans+Condensed:300|Rajdhani|Roboto|Roboto+Condensed|Source+Sans+Pro);
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

To change the font, first go to Google fonts, choose your desired font and use the generated code.

If you have a need to use custom fonts, Remove above section completely and visit Self Hosted Fonts

RTL Settings

If you want to setup right-to-left styling, You just need to add lang="ar" on HTML tag (<html lang="ar"></html>) of each page. See example below:

<!doctype html>
<html lang="ar"> <!-- set lang="ar" for RTL -->
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

Note LTR are enabled by default. If you wish to enable the RTL styling you can simply add lang="ar" above code from all HTML files.

Customization

you will need to add custom CSS through a separate CSS file.

You just need to link custom.css at the end of <head> tag of each page. See example below:

<link rel="stylesheet" type="text/css" href="css/custom.css" />

Particles js Effect

Beautiful particles js effect to display your content with attractive look. See below image and code for more information.

<div id="particles-js"></div>

Javascript code

<!--particles js-->
<script src="assets/particles/particles.js"></script>

<!--use one of the below JS link-->
<script src="assets/particles/js/app.js"></script> <!--effect one-->
<script src="assets/particles/js/app-02.js"></script> <!--effect two-->
<script src="assets/particles/js/app-03.js"></script> <!--effect three-->

You can also use particles js.

Page Titles

You can choose between 6 Types of page titles while creating your pages. The list of page title options & its descriptions are provided below for your reference:

1. Page Title - Left Alignment

It includes page title with alligned left, sub title under page title and breadcrumb in right part. See below image and code for more inforamtion.