All Projects → hexojs → hexo-fontawesome

hexojs / hexo-fontawesome

Licence: MIT license
A utility function which helps to inline fontawesome SVG files.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to hexo-fontawesome

hexo-theme-ayer
一个干净优雅的hexo主题 A clean and elegant theme for Hexo. 🐋
Stars: ✭ 1,396 (+10638.46%)
Mutual labels:  hexo
hexo-filter-mathjax
💯 Server side MathJax renderer plugin for Hexo.
Stars: ✭ 76 (+484.62%)
Mutual labels:  hexo
wololock.github.io
e.printstacktrace.blog source code
Stars: ✭ 12 (-7.69%)
Mutual labels:  hexo
hexo-renderer-less
Less renderer for Hexo.
Stars: ✭ 14 (+7.69%)
Mutual labels:  hexo
oi.men.ci
Menci 的 OI 博客(源代码与网站文件)
Stars: ✭ 27 (+107.69%)
Mutual labels:  hexo
zhisheng17.github.io
my blog website —— www.54tianzhisheng.cn
Stars: ✭ 92 (+607.69%)
Mutual labels:  hexo
hexo-theme-chord
a simple hexo theme.
Stars: ✭ 15 (+15.38%)
Mutual labels:  hexo
hexo-theme-lanmiao
使用bootstrap构建的类单页博客,粉色系简洁Hexo主题
Stars: ✭ 16 (+23.08%)
Mutual labels:  hexo
hexo-theme-materialized
A cool materialized theme for Hexo
Stars: ✭ 39 (+200%)
Mutual labels:  hexo
hexo-covers
Microbrowser covers for Hexo static site generator
Stars: ✭ 15 (+15.38%)
Mutual labels:  hexo
hexo-theme-zurb-foundation
Simple plain Zurb foundation theme for the static site generator hexo.js
Stars: ✭ 22 (+69.23%)
Mutual labels:  hexo
github.io
个人博客乁(๑˙ϖ˙๑乁) 国内用户 ->http://sunhang.top
Stars: ✭ 16 (+23.08%)
Mutual labels:  hexo
hexo-filter-responsive-images
Generate mutliple version of images for responsive Hexo blogs
Stars: ✭ 17 (+30.77%)
Mutual labels:  hexo
hexo-theme-next5-leaf
一款基于 Hexo v3.9 & Next v5.1.4 魔改的主题 🌞
Stars: ✭ 82 (+530.77%)
Mutual labels:  hexo
notion-down
Notion >> Markdown. Python utility that converts Notion pages into MD files, along with intergation to build static webpages such as Hexo | 自动从 Notion 笔记生成 MD 文件,并部署到 Hexo 静态博客 | Notion Pages より Markdown Files をコンバートする、更に Hexo Webpages までの自動化も可能
Stars: ✭ 81 (+523.08%)
Mutual labels:  hexo
hexo-netlify-cms
☕ A cup of coffee time to enable Netlify CMS
Stars: ✭ 29 (+123.08%)
Mutual labels:  hexo
hexo-jade-starter
Starter theme for Hexo implemented with Jade and Less.
Stars: ✭ 49 (+276.92%)
Mutual labels:  hexo
hexo-generator-tag
Tag generator plugin for Hexo.
Stars: ✭ 27 (+107.69%)
Mutual labels:  hexo
awesome-next
😎 Theme NexT, AWESOME NexT!
Stars: ✭ 47 (+261.54%)
Mutual labels:  hexo
hexo-auto-canonical
A generator automatically make canonical tag for hexo.
Stars: ✭ 15 (+15.38%)
Mutual labels:  hexo

hexo-fontawesome

A plugin for static pages generator Hexo. A utility function which helps to inline fontawesome SVG files.

Installation

Requirements

  • NodeJS at least 6.x

Easy way

Install this plugin and all free font-awesome styles:

npm install hexo-fontawesome --save

Advanced way

Install just a plugin:

npm install hexo-fontawesome --no-optional --save

Then you need to manually install all needed styles:

npm install @fortawesome/free-solid-svg-icons --save
npm install @fortawesome/free-regular-svg-icons --save
npm install @fortawesome/free-brands-svg-icons --save

Difference between version 2.x and 1.x

Font Awesome change package names in 5.1 https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md#50x-to-510

It's significant change enough for hexo-fontawesome to bump major version here.

How to migrate from 1.x to 2.x

  1. Uninstall icon packages if you did it manually:
npm uninstall @fortawesome/fontawesome-free-solid
npm uninstall @fortawesome/fontawesome-free-regular
npm uninstall @fortawesome/fontawesome-free-brands
  1. Install their 5.1+ alternatives
npm install @fortawesome/free-solid-svg-icons --save
npm install @fortawesome/free-regular-svg-icons --save
npm install @fortawesome/free-brands-svg-icons --save

Usage

In theme

This plugin adds a view helpers you can use in the theme to include inline SVG icons from the font-awesome collection.

fa_css()

Returns inline styles needed for the inline SVGs.

Example usage:

<style>
  <%- fa_css() %>
</style>

fa_inline(iconName, options)

Returns an SVG markup of the chosen icon.

Possible options:

  • prefix - the style prefix, fab for brands, fas for solid etc. Defaults to fas
<%- fa_inline('twitter', {prefix: 'fab'}) %>

In post

This plugin adds a tag that you can use in the theme to include inline SVG icons from the font-awesome collection.

{% fa_css %}

Returns inline styles needed for the inline SVGs.

Example usage:

# My
## Post
### Content
#### Here

{% fa_css %}

{% fa_inline iconName [prefix] %}

Returns an SVG markup of the chosen icon. prefix is the style prefix, fab for brands, fas for solid etc. Defaults to fas

Example usage:

# My
## Post
### Content
{% fa_inline twitter fab %}
#### Here


{% fa_css %}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].