Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade fontawesome version to latest (v6) from v5 Resolves #2242 #2326

Merged
merged 9 commits into from
Jul 16, 2023
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions docs/userGuide/syntax/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,16 @@ MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitH
<span id="tip_body">
The advantage of font icons over emojis is font icons can be _styled_ to fit your needs. e.g.,
* emoji: <span style="color: purple">Don't judge the :book: by its cover! :-1:</span>
* font icons: <span style="color: purple">Don't judge the :fas-book: by its cover! {{ icon_dislike }}</span>
* font icons: <span style="color: purple">Don't judge the :fa-solid-book: by its cover! {{ icon_dislike }}</span>
</span>
</include>

###### Using Font Awesome Icons
1. Decide which icon you want to use from the [list of available icons](https://fontawesome.com/icons?d=gallery&m=free).
1. Construct the MarkBind name for the selected icon by adding the _type prefix_.
Note: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:
* _Solid_ (prefix: `fas-`) e.g., :fas-file-code: (actual name `file-code`, MarkBind name `fas-file-code`)
* _Regular_ (prefix: `far-`) e.g., :far-file-code: (actual name `file-code`, MarkBind name `far-file-code`)
tlylt marked this conversation as resolved.
Show resolved Hide resolved
* _Brands_ (prefix: `fab-`): e.g., :fab-github-alt: (actual name `github-alt`, MarkBind name `fab-github-alt`)
Note: Font Awesome has two different styles for their icons, each with their own type prefix. Here is an example from each type:
* _Solid_ (prefix: `fa-solid-`) e.g., :fa-solid-file-code: (actual name `file-code`, MarkBind name `fa-solid-file-code`)
* _Brands_ (prefix: `fa-brands-`): e.g., :fa-brands-github-alt: (actual name `github-alt`, MarkBind name `fa-brands-github-alt`)

1. Insert MarkBind name for the icon enclosed within colons to get the icon in your page.<br>
`Create a **branch**`<code>:<span></span>fas-code-branch: now!</code> → Create a **branch** :fas-code-branch: now!
Expand All @@ -32,13 +31,13 @@ The advantage of font icons over emojis is font icons can be _styled_ to fit you

<div id="short" class="d-none">

<code>:<span></span>glyphicon-hand-right:</code> <code>:<span></span>fab-github:</code> <code>:<span></span>fas-home:</code>
<code>:<span></span>glyphicon-hand-right:</code> <code>:<span></span>fa-brands-github:</code> <code>:<span></span>fa-solid-home:</code>

</div>

<div id="examples" class="d-none">

:glyphicon-hand-right: :fab-github: :fas-home: %%:glyphicon-hand-right: :fab-github: :fas-home:%% <span style="color: red">:glyphicon-hand-right: :fab-github: :fas-home:</span>
:glyphicon-hand-right: :fa-brands-github: :fa-solid-home: %%:glyphicon-hand-right: :fa-brands-github: :fa-solid-home:%% <span style="color: red">:glyphicon-hand-right: :fa-brands-github: :fa-solid-home:</span>
</div>

###### Using Octicons
Expand Down
18 changes: 9 additions & 9 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

Binary file not shown.
Loading