Skip to content

Instantly share code, notes, and snippets.

@alexmustin

alexmustin/WooCommerce-MyAccount-menu-with-FontAwesome-icons.png

Last active April 6, 2022 01:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexmustin/1a779504412a8b3156fdf2d84edd4cec to your computer and use it in GitHub Desktop.
Save alexmustin/1a779504412a8b3156fdf2d84edd4cec to your computer and use it in GitHub Desktop.
Download ZIP
WooCommerce - Account Page Sidebar Nav Menu styles with FontAwesome icons
Raw
myaccount-navigation.html
<html>
<head></head>
<body class="woocommerce-account">
<nav class="woocommerce-MyAccount-navigation">
<ul>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active">
<a href="https://www.carrcellularfitness.com/my-account/">Dashboard</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
<a href="https://www.carrcellularfitness.com/my-account/orders/">Orders</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--downloads">
<a href="https://www.carrcellularfitness.com/my-account/downloads/">Downloads</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
<a href="https://www.carrcellularfitness.com/my-account/edit-address/">Addresses</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--payment-methods">
<a href="https://www.carrcellularfitness.com/my-account/payment-methods/">Payment methods</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
<a href="https://www.carrcellularfitness.com/my-account/edit-account/">Account details</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
<a href="https://www.carrcellularfitness.com/my-account/customer-logout/?_wpnonce=cc90a9c580">Logout</a>
</li>
</ul>
</nav>
</body>
</html>
Raw
style.css
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li {
list-style-type: none;
margin: 0 0 10px 0;
padding-top: 10px;
border-top: none;
width: 100%;
display: block;
text-align: left;
font-size: 16px;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.is-active {
font-size: 16px;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a {
text-decoration: none;
border-bottom: none;
color: #666;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a:hover {
color: #01a3ed;
}
/* icons */
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a::before {
font-family: 'Font Awesome 5 Free';
display: inline-block;
width: 20px;
text-align: center;
margin: 0 10px 0 0;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="dashboard"] a::before {
content:"\f015";
font-weight: 900;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="orders"] a::before {
content:"\f022";
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="subscriptions"] a::before {
content:"\f073";
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="downloads"] a::before {
content:"\f019";
font-weight: 900;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="edit-address"] a::before {
content:"\f303";
font-weight: 900;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="payment-methods"] a::before {
content:"\f09d";
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="edit-account"] a::before {
content:"\f007";
font-weight: 900;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li[class*="customer-logout"] a::before {
content:"\f2f5";
font-weight: 900;
}
Raw
style.scss
.woocommerce-account {
.woocommerce {
nav.woocommerce-MyAccount-navigation {
ul {
li {
list-style-type: none;
margin: 0 0 10px 0;
padding-top: 10px;
border-top: none;
width: 100%;
display: block;
text-align: left;
a {
text-decoration: none;
color: #666;
&::before {
font-family: 'Font Awesome 5 Free';
display: inline-block;
width: 20px;
text-align: center;
margin: 0 10px 0 0;
}
}
&.is-active a,
& a:hover {
color: #01a3ed;
}
/* FA ICONS */
&[class*="dashboard"] a::before {
content:"\f015";
font-weight: 900;
}
&[class*="orders"] a::before {
content:"\f022";
}
&[class*="subscriptions"] a::before {
content:"\f073";
}
&[class*="downloads"] a::before {
content:"\f019";
font-weight: 900;
}
&[class*="edit-address"] a::before {
content:"\f303";
font-weight: 900;
}
&[class*="payment-methods"] a::before {
content:"\f09d";
}
&[class*="edit-account"] a::before {
content:"\f007";
font-weight: 900;
}
&[class*="customer-logout"] a::before {
content:"\f2f5";
font-weight: 900;
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment