# إطلاق Font Awesome 5 وأيقونات SVG

**URL:** https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643
**Category:** Announcements
**Tags:** new-feature
**Created:** [9 نوفمبر 2018، 12:55ص UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643 "2018-11-09T00:55:16Z")
**Posts on this page:** 1
**Showing post:** 5

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [27 نوفمبر 2018، 10:28م UTC](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/5 "2018-11-27T22:28:16Z")

</div>

For HTML code directly, you can replace:

```plaintext
<i class="fas fa-arrow-left" aria-hidden="true"></i>

```

with:

```plaintext
<svg class="fa d-icon d-icon-arrow-left svg-icon svg-node" aria-hidden="true"><use xlink:href="#arrow-left"></use></svg>

```

Note that “arrow left” is in two places, in the class and in the `<use>` tag. Also, this icon is in the solid style in FA5, but for icons in regular or brands, you need to use the prefixes `far-` and `fab-`, respectively.

In your header links, you can’t use `:before` anymore, because SVG sprites can’t be added to pseudo selectors. But you can use this component: [Header Submenus](https://meta.discourse.org/t/header-submenus/94584) (it’s been updated recently, and is FA5-compatible).

---

_[View the full topic](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643)._