在这段代码中我已经使用字体真棒图标导航下拉。现在我要通过自定义图标。任何人都可以建议如何实现的呢?
.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;
}
这里是一个网站,你可以创建自己的自定义图标。你只需要上传您的自定义创建的图标SVG,转换至字体文件。您可以下载转换后的文件,你可以用在你的项目中。
----要遵循的步骤---点击命名的项目在右上角,然后单击新建项目。在那里,你可以看到左上角导入图标按钮。导入和转换您已创建到字体文件自定义SVG图标
希望下面捣鼓会为你工作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)
}
我觉得最清洁,最简单的解决方案是使用联SVG的。
这个过程很简单。
.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>