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.

Sign up for GitHub

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

Support Bootstrap icons #2494

Merged
merged 7 commits into from
Apr 9, 2024
Merged

Support Bootstrap icons #2494

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d2ec688
Add support for bootstrap icon
yiwen101 Apr 3, 2024
c134739
Update test
yiwen101 Apr 3, 2024
7c635bd
Add docs
yiwen101 Apr 3, 2024
d0bd0f7
Add acknowledgement
yiwen101 Apr 8, 2024
a4a6b17
Revert unnecesssary change in package json
yiwen101 Apr 8, 2024
905444e
Merge branch 'master' of https://github.com/MarkBind/markbind into yi…
yucheng11122017 Apr 9, 2024
1e473bd
add bootstrap icons to list of icons supported
yucheng11122017 Apr 9, 2024
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
8 changes: 7 additions & 1 deletion docs/userGuide/syntax/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Icons

<small>%%Acknowledgement: Font Awesome icons are provided by [Font Awesome](https://fontawesome.com/) under their [free license](https://fontawesome.com/license), Glyphicons are provided by [Glyphicons](https://glyphicons.com/) via [Bootstrap 3](https://getbootstrap.com/docs/3.3/), [Octicons](https://octicons.github.com) are copyright of GitHub, and Material icons are provided by [Google Fonts](https://fonts.google.com/icons) via [`material-icons` by Ravindra Marella](https://www.npmjs.com/package/material-icons) under the [Apache license 2.0](https://www.apache.org/licenses/LICENSE-2.0.html).%%</small>
<small>%%Acknowledgement: Font Awesome icons are provided by [Font Awesome](https://fontawesome.com/) under their [free license](https://fontawesome.com/license), Glyphicons are provided by [Glyphicons](https://glyphicons.com/) via [Bootstrap 3](https://getbootstrap.com/docs/3.3/). Bootstrap icons are designed by [@mdo](https://github.com/mdo), maintained by the [Bootstrap Team](https://github.com/orgs/twbs/people) and provided under MIT liscense. [Octicons](https://octicons.github.com) are copyright of GitHub, and Material icons are provided by [Google Fonts](https://fonts.google.com/icons) via [`material-icons` by Ravindra Marella](https://www.npmjs.com/package/material-icons) under the [Apache license 2.0](https://www.apache.org/licenses/LICENSE-2.0.html).%%</small>

MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.
MarkBind supports using Font Icons provided by Font Awesome, Glyphicons, GitHub's Octicons and Bootstrap icons.


Expand Down Expand Up @@ -55,6 +55,12 @@ MarkBind currently supports Version 6 of Font Awesome (Free plan). For detailed
1. You may also append `~class-name` to the end of the octicon name to add `class="class-name"` property to your Octicon (e.g. `:octicon-git-pull-request~icon-large-red:` will generate an Octicon of class *icon-large-red*). You may then add corresponding CSS to `{root}/_markbind/layouts/{layout-name}/styles.css` to customize the style of your Octicon.
1. If your background is dark, you may use `:octiconlight-*:` to render the icon as white.

###### Using Bootstrap icons
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Lines 3-5 : can you also update in this PR? Version of bootstrap relied on + Maybe delete line 5, which seems too repetitive.
  2. I never noticed before how repetitive these instructions are. I wonder if there is a better way to streamline the instructions? Hmm. Maybe a tooltip or something to see some different example icons would be cool.


1. Decide which icon you want to use from [list of available Bootstrap icons](https://icons.getbootstrap.com).
1. Insert the name for the icon enclosed within colons to get the icon in your page.<br>
`Add a romantic touch with :bi-arrow-through-heart:` → Add a romantic touch with :bi-arrow-through-heart:

###### Using Material Icons

1. Decide which icon you want to use from [list of available icons](https://fonts.google.com/icons).
Expand Down
21 changes: 21 additions & 0 deletions package-lock.json
View file
Open in desktop

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

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"walk-sync": "^2.0.2"
},
"dependencies": {
"bootstrap-icons": "^1.11.3",
"postcss": "^8.4.35"
}
}
Loading
Loading