如何使用自定义图标,而不是字体真棒图标

问题描述 投票:2回答:4

在这段代码中我已经使用字体真棒图标导航下拉。现在我要通过自定义图标。任何人都可以建议如何实现的呢?

.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;
 }
css html5
4个回答
0
投票

这里是一个网站,你可以创建自己的自定义图标。你只需要上传您的自定义创建的图标SVG,转换至字体文件。您可以下载转换后的文件,你可以用在你的项目中。

----要遵循的步骤---点击命名的项目在右上角,然后单击新建项目。在那里,你可以看到左上角导入图标按钮。导入和转换您已创建到字体文件自定义SVG图标

IcoMoon Custom font generator


0
投票

在这里,我已经证明了使用的图像作为图标在您的提琴我的代码是在底部。

check link

.nav-link-type-three::after

0
投票

希望下面捣鼓会为你工作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)
}

0
投票

INLINE SVG

我觉得最清洁,最简单的解决方案是使用联SVG的。

这个过程很简单。

  1. 一个隐藏的div添加到您的根页面的顶部包含所有SVG(符号)。
  2. 使用使用XLink的HREF的SVG参考您的网站的任意位置添加一个SVG。
  3. 风格在全球范围使用一个CSS类。
  4. 任选地添加不同的颜色来使用第二类的任何路径/形状的图标。

.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>

优点

  • 轻量级(仅包括所使用的符号)。
  • 跨浏览器兼容。
  • 可扩展性。
  • 灵活。
  • 定制。
© www.soinside.com 2019 - 2024. All rights reserved.