style: add & run prettier

This commit is contained in:
Jan Raasch 2020-09-09 18:00:59 +02:00
parent 30fe331123
commit 848f6129ec
24 changed files with 1874 additions and 1239 deletions

4
.github/FUNDING.yml vendored
View file

@ -1,2 +1,2 @@
custom: ['https://www.paypal.me/janraasch/29,00'] custom: ["https://www.paypal.me/janraasch/29,00"]
github: ['janraasch'] github: ["janraasch"]

View file

@ -3,30 +3,30 @@ name: CI
on: on:
push: push:
branches: branches:
- master - master
pull_request: pull_request:
branches: branches:
- master - master
jobs: jobs:
build: build:
runs-on: ubuntu-18.04 runs-on: ubuntu-18.04
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v2 uses: actions/checkout@v2
- name: Setup Hugo - name: Setup Hugo
uses: peaceiris/actions-hugo@v2 uses: peaceiris/actions-hugo@v2
with: with:
hugo-version: latest hugo-version: latest
- name: Build local ./exampleSite - name: Build local ./exampleSite
run: hugo --minify --gc --destination ../public --source ./exampleSite --themesDir ../.. --baseURL https://janraasch.github.io/hugo-scroll/ run: hugo --minify --gc --destination ../public --source ./exampleSite --themesDir ../.. --baseURL https://janraasch.github.io/hugo-scroll/
- name: Deploy to GitHub Pages - name: Deploy to GitHub Pages
if: github.event_name == 'push' if: github.event_name == 'push'
uses: peaceiris/actions-gh-pages@v3 uses: peaceiris/actions-gh-pages@v3
with: with:
github_token: ${{ secrets.GITHUB_TOKEN }} github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public publish_dir: ./public

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
public public
exampleSite/public exampleSite/public
node_modules

6
.prettierignore Normal file
View file

@ -0,0 +1,6 @@
build
resources
public
static/font-awesome
static/css/normalize.css
layouts/index.html

10
.prettierrc.json Normal file
View file

@ -0,0 +1,10 @@
{
"overrides": [
{
"files": ["*.html"],
"options": {
"parser": "go-template"
}
}
]
}

View file

@ -54,29 +54,30 @@ hugo new my-new-page.md
### Adding your branding / colors / css ### Adding your branding / colors / css
Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag *or* you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/janraasch/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file from the `exampleSite`-directory to get started and to find more detailed instructions. Add a `custom_head.html`-file to your `layouts/partials`-directory. In there you may add a `<style>`-tag _or_ you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Checkout the [`custom_head.html`](https://github.com/janraasch/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html)-file from the `exampleSite`-directory to get started and to find more detailed instructions.
## Issues / Feedback / Contributing ## Issues / Feedback / Contributing
Please use [GitHub issues](https://github.com/janraasch/hugo-scroll/issues) and [Pull Requests](https://github.com/janraasch/hugo-scroll/pulls). Please use [GitHub issues](https://github.com/janraasch/hugo-scroll/issues) and [Pull Requests](https://github.com/janraasch/hugo-scroll/pulls).
If you do not have a GitHub-account, feel free to hit me up via e-mail (see [janraasch.com](https://www.janraasch.com)). If you do not have a GitHub-account, feel free to hit me up via e-mail (see [janraasch.com](https://www.janraasch.com)).
## Sponsor [![Pay me][insert-coins-svg]][paypal-dot-me] ## Sponsor [![Pay me][insert-coins-svg]][paypal-dot-me]
Please consider supporting my work on this theme via [GitHub Sponsors][github-sponsors] or [PayPal][paypal-dot-me]. Please consider supporting my work on this theme via [GitHub Sponsors][github-sponsors] or [PayPal][paypal-dot-me].
[![GitHub Stats](https://github-readme-stats.vercel.app/api/?username=janraasch)][github-sponsors] [![GitHub Stats](https://github-readme-stats.vercel.app/api/?username=janraasch)][github-sponsors]
## Special Thanks 🎁 ## Special Thanks 🎁
* Go to [Yonatan Wolowelsky](https://github.com/grmmph), for the great [GhostScroll](https://github.com/grmmph/GhostScroll)-theme which formed the basis of this [Hugo](https://gohugo.io/)-theme. - Go to [Yonatan Wolowelsky](https://github.com/grmmph), for the great [GhostScroll](https://github.com/grmmph/GhostScroll)-theme which formed the basis of this [Hugo](https://gohugo.io/)-theme.
* Go to [Pexels](https://www.pexels.com), for supplying those wonderful *free* stock photos on the [exampleSite](https://github.com/janraasch/hugo-scroll/tree/master/exampleSite). - Go to [Pexels](https://www.pexels.com), for supplying those wonderful _free_ stock photos on the [exampleSite](https://github.com/janraasch/hugo-scroll/tree/master/exampleSite).
## License ## License
[MIT License](http://en.wikipedia.org/wiki/MIT_License) © [Jan Raasch](https://www.janraasch.com) [MIT License](http://en.wikipedia.org/wiki/MIT_License) © [Jan Raasch](https://www.janraasch.com)
[paypal-dot-me]: https://www.paypal.me/janraasch/29,00 [paypal-dot-me]: https://www.paypal.me/janraasch/29,00
[github-sponsors]: https://github.com/sponsors/janraasch [github-sponsors]: https://github.com/sponsors/janraasch
[insert-coins-svg]: https://img.shields.io/badge/insert-coins-11dde2.svg [insert-coins-svg]: https://img.shields.io/badge/insert-coins-11dde2.svg
[hugo-setup-guide]: https://gohugo.io/getting-started/installing [hugo-setup-guide]: https://gohugo.io/getting-started/installing

View file

@ -8,4 +8,5 @@ weight: 5
# into the header menu at the top of the homepage. # into the header menu at the top of the homepage.
header_menu: true header_menu: true
--- ---
This is just another section to appear on the homepage. This is just another section to appear on the homepage.

View file

@ -1,8 +1,9 @@
--- ---
title: 'About Me' title: "About Me"
weight: 3 weight: 3
header_menu: true header_menu: true
--- ---
![Jane Doe](images/happy-ethnic-woman-sitting-at-table-with-laptop-3769021.jpg) ![Jane Doe](images/happy-ethnic-woman-sitting-at-table-with-laptop-3769021.jpg)
##### Professionel Experience ##### Professionel Experience

View file

@ -1,8 +1,9 @@
--- ---
title: 'Contact' title: "Contact"
weight: 4 weight: 4
header_menu: true header_menu: true
--- ---
E-Mail: [mail@janedoe.com](mailto:your-email@your-domain.com) E-Mail: [mail@janedoe.com](mailto:your-email@your-domain.com)
Tel.: [+49 1111 555555](tel:+491111555555) Tel.: [+49 1111 555555](tel:+491111555555)

View file

@ -1,5 +1,5 @@
--- ---
title: 'Welcome' title: "Welcome"
weight: 1 weight: 1
--- ---

View file

@ -1,8 +1,9 @@
--- ---
title: 'Services' title: "Services"
weight: 2 weight: 2
header_menu: true header_menu: true
--- ---
That is the important part, right? You want to know what I can do for you. This is why I put this right up there into the header menu of the website. That is the important part, right? You want to know what I can do for you. This is why I put this right up there into the header menu of the website.
--- ---

View file

@ -1,5 +1,5 @@
--- ---
title: 'Services' title: "Services"
--- ---
This is a page about the services, which I offer. This is a page about the services, which I offer.

View file

@ -61,6 +61,20 @@
<!-- Custom link-tags for different icons <!-- Custom link-tags for different icons
Generated via https://favicon.io/favicon-generator/ --> Generated via https://favicon.io/favicon-generator/ -->
<link rel="apple-touch-icon" sizes="180x180" href='{{ "images/apple-touch-icon.png" | absURL }}'> <link
<link rel="icon" type="image/png" sizes="32x32" href='{{ "images/favicon-32x32.png" | absURL }}'> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href='{{ "images/favicon-16x16.png" | absURL }}'> sizes="180x180"
href="{{ "images/apple-touch-icon.png" | absURL }}"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="{{ "images/favicon-32x32.png" | absURL }}"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="{{ "images/favicon-16x16.png" | absURL }}"
/>

View file

@ -1,15 +1,16 @@
{{ define "main" }} {{ define "main" }}
<main class="content page-template 404" role="main"> <main class="content page-template 404" role="main">
<article class="post page"> <article class="post page">
<header class="post-header"> <header class="post-header">
<a id="blog-logo" href="{{ "/" | relURL }}"> <a id="blog-logo" href="{{ "/" | relURL }}">
{{ .Site.Title }} {{ .Site.Title }}
</a> </a>
</header> </header>
<h1 class="post-title">404 - Page Not Found</h1> <h1 class="post-title">404 - Page Not Found</h1>
<section class="post-content"> <section class="post-content">
Give it another try: <a href="{{ "/" | relURL }}" alt="Homepage">Back to the homepage</a>. Give it another try:
</section> <a href="{{ "/" | relURL }}" alt="Homepage">Back to the homepage</a>.
</section>
</article> </article>
</main> </main>
{{ end }} {{ end }}

View file

@ -1,20 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
<!-- We do need jQuery to be loaded before HugoScroll script --> <!-- We do need jQuery to be loaded before HugoScroll script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script
type="text/javascript"
src="https://code.jquery.com/jquery-1.11.3.min.js"
></script>
<!-- The main JavaScript files for HugoScroll --> <!-- The main JavaScript files for HugoScroll -->
<script type="text/javascript" src='{{ "js/icons.js" | absURL }}'></script> <script type="text/javascript" src='{{ "js/icons.js" | absURL }}'></script>
<script type="text/javascript" src='{{ "js/index.js" |absURL }}'></script> <script type="text/javascript" src='{{ "js/index.js" |absURL }}'></script>
<!-- A partial to be overwritten by the user. <!-- A partial to be overwritten by the user.
Simply place a custom_body.html into Simply place a custom_body.html into
your local /layouts/partials-directory --> your local /layouts/partials-directory -->
{{- partial "custom_body.html" . -}} {{- partial "custom_body.html" . -}}
</body> </body>
</html> </html>

View file

@ -1,15 +1,15 @@
{{ define "main" }} {{ define "main" }}
<main class="content page-template page-{{ .Slug }}" role="main"> <main class="content page-template page-{{ .Slug }}" role="main">
<article class="post page"> <article class="post page">
<header class="post-header"> <header class="post-header">
<a id="blog-logo" href="{{ "/" | relURL }}"> <a id="blog-logo" href="{{ "/" | relURL }}">
{{ .Site.Title }} {{ .Site.Title }}
</a> </a>
</header> </header>
<h1 class="post-title">{{ .Title }}</h1> <h1 class="post-title">{{ .Title }}</h1>
<section class="post-content"> <section class="post-content">
{{ .Content }} {{ .Content }}
</section> </section>
</article> </article>
</main> </main>
{{ end }} {{ end }}

View file

@ -14,7 +14,6 @@
<i id='header-arrow' class="fa fa-angle-down"></i> <i id='header-arrow' class="fa fa-angle-down"></i>
</div> </div>
</div> </div>
</header> </header>
<main class="content" role="main"> <main class="content" role="main">

View file

@ -1,11 +1,18 @@
<footer class="site-footer"> <footer class="site-footer">
<div class="inner"> <div class="inner">
{{ with .Site.Params.copyright }}<section class="copyright">{{ . | markdownify }}</section>{{ end }} {{ with .Site.Params.copyright }}
<section>{{ echoParam .Site.Params "hidebyline" }}</section> <section class="copyright">{{ . | markdownify }}</section>{{ end }}
{{ if ne .Site.Params.hidedesignbyline true }}<section>
<!-- TODO: Change link to https://themes.gohugo.io/hugo-scroll/ once
<section>{{ echoParam .Site.Params "hidebyline" }}</section>
{{ if ne .Site.Params.hidedesignbyline true }}
<section>
<!-- TODO: Change link to https://themes.gohugo.io/hugo-scroll/ once
https://github.com/gohugoio/hugoThemes/issues/881 is solved. --> https://github.com/gohugoio/hugoThemes/issues/881 is solved. -->
<a href="https://github.com/janraasch/hugo-scroll/">Design</a> template built with ♥️ by <a href="https://www.janraasch.com" title="Jan Raasch">Jan Raasch</a> <a href="https://github.com/janraasch/hugo-scroll/">Design</a> template
</section>{{ end }} built with ♥️ by
</div> <a href="https://www.janraasch.com" title="Jan Raasch">Jan Raasch</a>
</section>{{ end }}
</div>
</footer> </footer>

View file

@ -3,20 +3,37 @@
<title>{{ with .Title }}{{ . }}{{ else }}{{ .Site.Title }}{{ end }}</title> <title>{{ with .Title }}{{ . }}{{ else }}{{ .Site.Title }}{{ end }}</title>
{{ with .Site.Params.favicon }}<link rel="shortcut icon" href="{{ . | absURL }}" type="image/png"/>{{ end }} {{ with .Site.Params.favicon }}
<link rel="shortcut icon" href="{{ . | absURL }}" type="image/png"
/>{{ end }}
{{ with .Site.Params.description }}<meta name="description" content="{{ . }}" />{{ end }} {{ with .Site.Params.description }}
{{ with .Site.Params.meta.keywords }}<meta name="keywords" content="{{ . }}" />{{ end }} <meta name="description" content="{{ . }}"
/>{{ end }}
{{ with .Site.Params.meta.keywords }}
<meta name="keywords" content="{{ . }}"
/>{{ end }}
<meta name="referrer" content="no-referrer-when-downgrade" /> <meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="HandheldFriendly" content="True" /> <meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" /> <meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href='{{ "css/screen.css" | absURL }}'> <link rel="stylesheet" href="{{ "css/screen.css" | absURL }}" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'> <link
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700"
<link rel="stylesheet" href='{{ "font-awesome/css/font-awesome.min.css" | absURL }}'> rel="stylesheet"
type="text/css"
/>
<link
href="https://fonts.googleapis.com/css?family=Oswald:400,300,700|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Roboto+Slab:400,100,300,700"
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
href="{{ "font-awesome/css/font-awesome.min.css" | absURL }}"
/>
{{ template "_internal/opengraph.html" . }} {{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }} {{ template "_internal/twitter_cards.html" . }}

20
package-lock.json generated Normal file
View file

@ -0,0 +1,20 @@
{
"name": "hugo-scroll",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"prettier": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz",
"integrity": "sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==",
"dev": true
},
"prettier-plugin-go-template": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.10.tgz",
"integrity": "sha512-TaHPqiMK/zfk+YhvKRf/1WZDgQ6ffnlxJZX5rwphqfxBOVEezZQtYistTB348MKrKnnwKpyXZWpMRo0/KCVB+A==",
"dev": true
}
}
}

29
package.json Normal file
View file

@ -0,0 +1,29 @@
{
"private": true,
"name": "hugo-scroll",
"version": "1.0.0",
"description": "A Hugo theme for pretty, quick and simple single-page websites.",
"main": "index.js",
"scripts": {
"test": "prettier --check . ",
"format": "prettier --write . "
},
"repository": {
"type": "git",
"url": "git+https://github.com/janraasch/hugo-scroll.git"
},
"author": {
"name": "Jan Raasch",
"email": "jan@janraasch.com",
"url": "https://www.janraasch.com"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/janraasch/hugo-scroll/issues"
},
"homepage": "https://github.com/janraasch/hugo-scroll#readme",
"devDependencies": {
"prettier": "^2.1.1",
"prettier-plugin-go-template": "0.0.10"
}
}

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -2,121 +2,133 @@
* Main JS file for GhostScroll behaviours * Main JS file for GhostScroll behaviours
*/ */
var $post = $('.post'); var $post = $(".post");
var $first = $('.post.first'); var $first = $(".post.first");
var $last = $('.post.last'); var $last = $(".post.last");
var $fnav = $('.fixed-nav'); var $fnav = $(".fixed-nav");
var $postholder = $('.post-holder'); var $postholder = $(".post-holder");
var $postafter = $('.post-after'); var $postafter = $(".post-after");
var $sitehead = $('#site-head'); var $sitehead = $("#site-head");
/* Globals jQuery, document */ /* Globals jQuery, document */
(function ($) { (function ($) {
"use strict"; "use strict";
function srcTo (el) { function srcTo(el) {
$('html, body').animate({ $("html, body").animate(
scrollTop: el.offset().top {
}, 1000); scrollTop: el.offset().top,
} },
function srcToAnchorWithTitle (str) { 1000
var $el = $('#' + str); );
if ($el.length) { }
srcTo($el); function srcToAnchorWithTitle(str) {
} var $el = $("#" + str);
} if ($el.length) {
$(document).ready(function(){ srcTo($el);
}
}
$(document).ready(function () {
$postholder.each(function (e) {
if (e % 2 != 0) $(this).addClass("odd");
});
$postholder.each(function (e) { $postafter.each(function (e) {
if(e % 2 != 0) var bg = $(this).parent().css("background-color");
$(this).addClass("odd"); $(this).css("border-top-color", bg);
});
$postafter.each(function (e) { if (e % 2 == 0) {
var bg = $(this).parent().css('background-color') $(this).addClass("even");
$(this).css('border-top-color', bg); }
});
if (e % 2 == 0) { $("a.btn.site-menu").click(function (e) {
$(this).addClass("even"); srcToAnchorWithTitle($(e.target).data("title-anchor"));
} });
}); $("#header-arrow").click(function () {
srcTo($first);
});
$('a.btn.site-menu').click(function (e) { $(".post-title").each(function () {
srcToAnchorWithTitle($(e.target).data('title-anchor')); var t = $(this).text();
}); var index = $(this).parents(".post-holder").index();
$('#header-arrow').click(function () { $fnav.append(
srcTo($first); "<a class='fn-item' item_index='" + index + "'>" + t + "</a>"
}); );
$(".fn-item").click(function () {
var i = $(this).attr("item_index");
var s = $(".post[item_index='" + i + "']");
$('.post-title').each(function () { $("html, body").animate(
var t = $(this).text(); {
var index = $(this).parents('.post-holder').index(); scrollTop: s.offset().top,
$fnav.append("<a class='fn-item' item_index='"+index+"'>"+t+"</a>") },
$('.fn-item').click(function () { 400
var i = $(this).attr('item_index'); );
var s = $(".post[item_index='"+i+"']"); });
});
$('html, body').animate({ $(".post.last").next(".post-after").hide();
scrollTop: s.offset().top if ($sitehead.length) {
}, 400); $(window).scroll(function () {
var w = $(window).scrollTop();
var g = $sitehead.offset().top;
var h = $sitehead.offset().top + $sitehead.height() - 100;
}); if (w >= g && w <= h) {
}); $(".fixed-nav").fadeOut("fast");
} else if ($(window).width() > 500) {
$(".fixed-nav").fadeIn("fast");
}
$('.post.last').next('.post-after').hide(); $post.each(function () {
if($sitehead.length) { var f = $(this).offset().top;
$(window).scroll( function () { var b = $(this).offset().top + $(this).height();
var w = $(window).scrollTop(); var t = $(this).parent(".post-holder").index();
var g = $sitehead.offset().top; var i = $(".fn-item[item_index='" + t + "']");
var h = $sitehead.offset().top + $sitehead.height()-100; var a = $(this)
.parent(".post-holder")
.prev(".post-holder")
.find(".post-after");
if(w >= g && w<=h) { $(this).attr("item_index", t);
$('.fixed-nav').fadeOut('fast');
} else if($(window).width()>500) {
$('.fixed-nav').fadeIn('fast');
}
$post.each(function () { if (w >= f && w <= b) {
var f = $(this).offset().top; i.addClass("active");
var b = $(this).offset().top + $(this).height(); a.fadeOut("slow");
var t = $(this).parent('.post-holder').index(); } else {
var i = $(".fn-item[item_index='"+t+"']"); i.removeClass("active");
var a = $(this).parent('.post-holder').prev('.post-holder').find('.post-after'); a.fadeIn("slow");
}
});
});
}
$(this).attr('item_index', t); $("ul li").before(
'<span class="bult fa fa-asterisk icon-asterisk"></span>'
);
$("blockquote p").prepend('<span class="quo icon-quote-left"></span>');
$("blockquote p").append('<span class="quo icon-quote-right"></span>');
});
if(w >= f && w<=b) { $post.each(function () {
i.addClass('active'); var postText = $(this).html();
a.fadeOut('slow'); var fa = [];
} else { for (var i = 0; i < icons.length; i++) {
i.removeClass('active'); fa[i] = {};
a.fadeIn('slow'); fa[i].str = "@" + icons[i] + "@";
} fa[i].icon = icons[i];
}); fa[i].int = postText.search(fa[i].str);
});
}
$('ul li').before('<span class="bult fa fa-asterisk icon-asterisk"></span>'); if (fa[i].int > -1) {
$('blockquote p').prepend('<span class="quo icon-quote-left"></span>'); fa[i].count = postText.match(new RegExp(fa[i].str, "g")).length;
$('blockquote p').append('<span class="quo icon-quote-right"></span>'); for (var j = 0; j < fa[i].count; j++) {
}); $(this).html(
$(this)
$post.each(function () { .html()
var postText = $(this).html(); .replace(fa[i].str, "<i class='fa " + fa[i].icon + "'></i>")
var fa = []; );
for(var i=0; i < icons.length; i++) { }
fa[i] = {}; }
fa[i].str = "@"+ icons[i]+ "@"; }
fa[i].icon = icons[i]; });
fa[i].int = postText.search(fa[i].str); })(jQuery);
if(fa[i].int > -1 ) {
fa[i].count = postText.match(new RegExp(fa[i].str,"g")).length;
for(var j=0; j < fa[i].count; j++) {
$(this).html($(this).html().replace(fa[i].str, "<i class='fa "+fa[i].icon+"'></i>"))
}
}
}
});
}(jQuery));