如何使用自定义图标代替Fontawesome图标

Question

In this code i have used Fontawesome icons for nav dropdown. Now i have to pass custom icons. can anyone suggest how to achive it?

.nav-link-type-one::after,
 li.show .nav-link-type-one::after {
     right: -7px;
     color: #fff;
     font-size: 17px;
     top: 1px;
     font-family: FontAwesome;
     content: "\f0d7";
     position: relative;
 }

 .nav-link-type-one::after,
 li.show .nav-link-type-one::after {
     content: "\f0d7";
 }

 li.show .nav-link-type-one::after {
     content: "\f0d8";
     color: #ec7f4a;
 }

Answer 1

Here is a site where you can create your own custom icons. You just need to upload your custom created icon SVG and convert that to the font files. You can download that converted files and you can use that in your project.

---- Steps to follow --- Click the untitled project in the top right and then click New Project. There you can see Import Icon button on the left top. Import and convert the custom SVG icons that you have created into font files

IcoMoon Custom font generator

Answer 2

Here I have demonstrated the use of an image as icons in your fiddle my code is at the bottom.

check link

.nav-link-type-three::after

Answer 3

Hope the following fiddle will work for you JSFiddle Link here

.nav-link-type-three {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 1rem;
}
.nav-link-type-three:hover{
text-decoration: none;
}
.nav-link-type-three::after,  li.show .nav-link-type-three::after{
position: absolute;   
background:url("your image path goes here...") no-repeat;
width:16px;
height:16px;
content: "";
 right:0
}
li.show .nav-link-type-three::after{
  transform:rotate(180deg)
}

Answer 4

INLINE SVG

I find the cleanest and most lightweight solution is to use inline svg's.

The process is simple.

1. Add a hidden div to the top of your root page to contain all your svg (symbols).
2. Add an svg anywhere on your website using the svg refernced using the xlink href.
3. Style globally using single css class.
4. Optionally add differant colours to icons using a second class to any paths/shapes.

 .Icon { width: 30px; height: 30px; position: relative; vertical-align: middle; fill: #113d63; transition: all ease-in-out .2s; } #Icon-Menu .Path2 { fill: #b00; } 

 <div style="height: 0; width: 0; position: absolute; visibility: hidden;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="Icon-Menu" viewBox="0 0 100 100"> <path class="Path1" d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333 C96.417,6.679,95.071,5.333,93.417,5.333z" /> <path class="Path2" d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333 C96.417,41.679,95.071,40.333,93.417,40.333z" /> <path class="Path1" d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333 C96.417,76.679,95.071,75.333,93.417,75.333z" /> </symbol> </svg> </div> <svg class="Icon"><use xlink:href="#Icon-Menu" /></svg> 

---

BENEFITS

• Lightweight (Only includes symbols that are used).
• Cross browser compatible.
• Scalable.
• Flexible.
• Customisable.