We are using iconify library for icons.
Read the official
Iconify
Documentation for a full list of instructions and other options.
Iconify allows you to easily integrate SVG icons into your project. It simplifies the process of adding scalable vector icons without relying on multiple libraries, providing access to thousands of icons in a single package.
We have already included Iconify Icons in template so you don't have to worry about including any files. Check below mentioned path to find Iconify Icons in your template.
<link rel="stylesheet" href="assets/vendor/fonts/iconify-icons.css" />
Basic Usage
<i class="icon-base bx bx-trophy icon-md me-4"></i>
<i class="icon-base bx bx-crown icon-md me-4"></i>
<i class="icon-base bx bx-chat icon-md me-4"></i>
<i class="icon-base bx bx-gift icon-md me-4"></i>
<i class="icon-base bx bx-bullseye icon-md"></i>
Class | Value |
---|---|
class="icon-base bx bx-{value}"
|
ICON_NAME |
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
We have already included Font Awesome in template so you don't have to worry about including any files. Check below mentioned path to find the location in your template.
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css" />
Basic Usage
<i class="icon-base fab fa-fort-awesome icon-md me-6"></i>
<i class="icon-base far fa-gem icon-md me-6"></i>
<i class="icon-base far fa-star icon-md me-6"></i>
<i class="icon-base fab fa-xbox icon-md me-6"></i>
<i class="icon-base fab fa-jenkins icon-md"></i>
Class | Value |
---|---|
class="icon-base fa-{value}"
|
ICON_NAME |
Sizing
<i class="fab fa-odnoklassniki fa-10x me-6"></i>
<i class="fab fa-odnoklassniki fa-7x me-6"></i>
<i class="fab fa-odnoklassniki fa-5x me-6"></i>
<i class="fab fa-odnoklassniki fa-3x me-6"></i>
<i class="fab fa-odnoklassniki fa-2x me-6"></i>
<i class="fab fa-odnoklassniki fa-lg me-6"></i>
<i class="fab fa-odnoklassniki fa-sm me-6"></i>
<i class="fab fa-odnoklassniki fa-xs"></i>
Class | Value |
---|---|
class="fa-{value}"
|
xs | sm | lg | 2x | 3x | 5x | 7x | 10x |
Rotation & Flipping
<i class="icon-base fab fa-sticker-mule fa-rotate-90 fa-3x me-6"></i>
<i class="icon-base fab fa-sticker-mule fa-rotate-180 fa-3x me-6"></i>
<i class="icon-base fab fa-sticker-mule fa-rotate-270 fa-3x me-6"></i>
<i class="icon-base fab fa-sticker-mule fa-flip-horizontal fa-3x me-6"></i>
<i class="icon-base fab fa-sticker-mule fa-flip-vertical fa-3x me-6"></i>
<i class="icon-base fab fa-sticker-mule fa-flip-both fa-3x"></i>
Class | Value |
---|---|
class="fa-{value}"
|
fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical | fa-flip-both |
Sneat provides iconify icons. It will give you freedom to choose any icons set. So user can use icons of their own choice as well.
We have used boxicons iconify icons. Sneat uses default, solid & logo icons of iconify boxicons.
If you are using building tools,
Let's say, you want to add other iconify icons like feather. Please follow below steps :
fonts/iconify/iconify.js
file to update with new icons.// Icon sources
const sources = {
json: [
require.resolve('@iconify/json/json/bx.json'),
require.resolve('@iconify/json/json/bxl.json'),
require.resolve('@iconify/json/json/bxs.json')
]
};
// Icon sources
const sources = {
json: [
require.resolve('@iconify/json/json/fe.json')
]
};
iconify.js
file to use new iconify icons. Like belowcommonSelector: '.fe',
yarn install
yarn build
class="fe fe-comment-o"
and so on..
You don't need to update file include as once you build assets same file will update with newly added icons.
And You are all Set!!
Sneat provides option to use custom font icons. So user can use icons of their own choice as well.
If you are using building tools,
If you want to add other font-icons like boxicons. Please follow below steps :
package.json
file to install using npm / yarn"dependencies": {
...
"boxicons": "~2.0.9",
...
}
yarn install
or npm install
to install fonts inside template's
node-modules
boxicons.scss
file inside src/fonts/
folder.node-modules
to boxicons.scss
file.$boxicons-font-size-base: 16px; // variable
@import '../node_modules/boxicons/css/boxicons'; // import from node-modules
// Custom scss
.bx {
vertical-align: middle;
font-size: 1.15rem;
line-height: 1;
}
// Override font path according to yours
@font-face {
font-family: 'boxicons';
font-weight: normal;
font-style: normal;
src: url('../fonts/boxicons/boxicons.eot');
src: url('../fonts/boxicons/boxicons.eot') format('embedded-opentype'),
url('../fonts/boxicons/boxicons.woff2') format('woff2'),
url('../fonts/boxicons/boxicons.woff') format('woff'),
url('../fonts/boxicons/boxicons.ttf') format('truetype'),
url('../fonts/boxicons/boxicons.svg?#boxicons') format('svg');
}
src/tasks/build.js
file.// Build fonts
// -------------------------------------------------------------------------------
const FONT_TASKS = [
{
name: 'boxicons',
path: 'node_modules/boxicons/fonts/*'
},
...
]
<link rel="stylesheet" href="ASSETS_PATH/vendor/fonts/boxicons.css" />
yarn build
OR
yarn build:fonts
yarn build:css
class="bx bx-message"
and so on..You can generate Iconify icon. Read More
If you are not using building tools,
You can include CDN fonts using CDN. Read More
If you want to use font icons using font files. Read More