mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-26 13:31:30 +08:00
Add instructions to customize SVG framework
parent
4a6ff38666
commit
b19362901a
@ -4,8 +4,6 @@ So, if you need a new icon in a short while, or you need a comprehensive set of
|
|||||||
|
|
||||||
## The Easy Way
|
## The Easy Way
|
||||||
|
|
||||||
⚠️ Only works for CSS. SVG customization is on the To-Do list
|
|
||||||
|
|
||||||
There are some wonderful online services which allows you to customize Font Awesome, like:
|
There are some wonderful online services which allows you to customize Font Awesome, like:
|
||||||
|
|
||||||
- **Fort Awesome**: https://fortawesome.com/ (by **@davegandy**, creator of Font Awesome)
|
- **Fort Awesome**: https://fortawesome.com/ (by **@davegandy**, creator of Font Awesome)
|
||||||
@ -15,6 +13,43 @@ There are some wonderful online services which allows you to customize Font Awes
|
|||||||
|
|
||||||
Pick up the one which better fits your needs.
|
Pick up the one which better fits your needs.
|
||||||
|
|
||||||
|
### SVG Framework
|
||||||
|
|
||||||
|
⚠️ SVG customization is on the To-Do list, meanwhile please use this approach
|
||||||
|
|
||||||
|
Prerequisites:
|
||||||
|
1. [Webpack](https://webpack.js.org/)
|
||||||
|
2. Single-path SVG
|
||||||
|
|
||||||
|
*Instructions are different for TypeScript*
|
||||||
|
|
||||||
|
JavaScript:
|
||||||
|
```js
|
||||||
|
import { library, dom } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
|
||||||
|
// replace 'M241 241 H 351 V 351 H 241 L 241 241' with your single-path SVG
|
||||||
|
var faMyCustomIcon = {
|
||||||
|
prefix: 'fac',
|
||||||
|
iconName: 'my-custom-icon',
|
||||||
|
icon: [512, 512, [], 'e001', 'M241 241 H 351 V 351 H 241 L 241 241']
|
||||||
|
}
|
||||||
|
|
||||||
|
library.add(
|
||||||
|
faMyCustomIcon
|
||||||
|
)
|
||||||
|
|
||||||
|
dom.watch()
|
||||||
|
```
|
||||||
|
|
||||||
|
HTML:
|
||||||
|
```html
|
||||||
|
<span class="fac fa-my-custom-icon"></span>
|
||||||
|
```
|
||||||
|
|
||||||
|
Docs: https://fontawesome.com/how-to-use/with-the-api/setup/getting-started
|
||||||
|
|
||||||
|
Ref: [#14199](https://github.com/FortAwesome/Font-Awesome/issues/14199)
|
||||||
|
|
||||||
## The Hard Way
|
## The Hard Way
|
||||||
|
|
||||||
⚠️ Outdated information. Please wait for the main repository to reflect FA5 changes
|
⚠️ Outdated information. Please wait for the main repository to reflect FA5 changes
|
||||||
|
Loading…
Reference in New Issue
Block a user