在线SVG

Question

在此代码中，我使用了Fontawesome图标进行导航下拉。现在，我必须传递自定义图标。有人可以建议如何实现吗？

.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

在这里您可以创建自己的自定义图标。您只需要上传自定义创建的图标SVG并将其转换为字体文件。您可以下载转换后的文件，也可以在项目中使用它。

----遵循的步骤- 单击右上角的无标题项目，然后单击“新建项目”。在那里，您可以在左上方看到“导入图标”按钮。将您创建的自定义SVG图标导入并转换为字体文件

IcoMoon Custom font generator

Answer 2

在这里，我已经演示了如何在您的小提琴中使用图像作为图标我的代码在底部。

check link

.nav-link-type-three::after

Answer 3

希望以下小提琴为您服务 JSFiddle Link here

namespace :elasticbeanstalk do
  desc 'Creates a new web & worker environment pair for testing'
  task :create do
    require 'aws-sdk-elasticbeanstalk'

     # Do stuff with beanstalk that we wouldn't from a production env
  end
end

Answer 4

在线SVG

我发现最干净，最轻巧的解决方案是使用嵌入式svg。

过程很简单。

在根页面顶部添加一个隐藏的div，以包含所有svg（符号）。
使用xlink href引用的svg在您网站的任何位置添加svg。
使用单个CSS类全局设置样式。
（可选）使用第二类为任何路径/形状添加不同颜色的图标。

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

好处

轻量级（仅包括使用的符号）。
跨浏览器兼容。
可扩展。
灵活。
可定制的。

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

4 个答案:

在线SVG

好处