如题,外购代码中有一个返回图标感觉不太直观,想换一个自己喜欢的,但是不知道怎么修改。目前图标是这样的,使用 xlink:href 控制调用图标样式
<div class="btn-icon sm-none" data-toggle="tooltip" data-placement="left">
<svg class="icon icon-32" aria-hidden="true">
<use xlink:href="#home"></use>
</svg>
</div>
希望更换成另一个图标,但沿用框架整体样式(框架样式会根据主题选择不同动态变化,所以不能直接换一张矢量图上去)。问题是翻了翻网站文件也没找到这个#home 文件是从哪里被调出来的,也没找到类似打包的文件,业余前端搞不懂了
1
P233 2022-02-15 06:12:12 +08:00
找这个页面里 <defs></defs> 定义的 #home
|
2
ynyounuo 2022-02-15 06:18:56 +08:00
rg 'id="home"'
|
3
LeeReamond OP @P233 搜索全文件夹,字符串 home 仅在调用时出现一次,其他出现<defs>的地方还有两处,分别是
<title>typecho-logo</title> <description>Created with Sketch ( http://www.bohemiancoding.com/sketch)</description> <defs></defs> 以及 <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs><path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path></defs> 似乎看起来都是不相关的图标。搜索 index.html 的渲染后网页源码中也未找到相关<defs>字段,它可能被引用在其他文件中吗? |
4
P233 2022-02-15 07:05:06 +08:00
试试从 devtools 里搜 <defs> 标签,可能是外部资源注入到 DOM 里的
<use xlink:href="#home"></use> 一定用的是本页 DOM 里的 id |
5
LeeReamond OP @P233 感谢老哥回复,F12 搜索 dom 的话提示<defs>字段共一处,就是 3#中那个<defs><path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path></defs>的东西,我推测这个 d 属性应该就是描述形状的,这么短应该跟图标无关,好怪啊。
|
6
P233 2022-02-15 07:17:16 +08:00
@LeeReamond 那 DOM 里搜 id="home" 能找到吗?
|
7
LeeReamond OP @P233 我按照你的思路把页面右键另存为了一下然后搜索找到了,它的定义是在一个<svg>标签里,然后用
<symbol id="home" viewBox="0 0 1158 1024"><path d="M102..."</symbol>这个方式定义的。我不知道怎么定位到这个 svg 标签是哪个资源引入的,然后我比如我找到一个喜欢的图标,是 fontaweosome 里的,我要怎么把它贴到这个资源里呢。 |
8
3dwelcome 2022-02-15 07:26:18 +08:00
这题我会。
xlink:href="#home"就是引用另一个 id 为 home 的 svg dom 。 找 dom 可以在控制台输入 document.getElementById('home'),然后对 DOM 点右键,菜单里选择“Reveal in Elements panel”就自动跳过去了。 |
9
P233 2022-02-15 07:44:06 +08:00
@3dwelcome 666666
@LeeReamond 要不把 font awesome 里需要的图标也做成 symbols 然后 想他这样 <use ...> 吧。毕竟一个一个替换,不便管理,量大可以尝试维护一套新的图标。 |
10
LeeReamond OP @P233 我就想换一个图标。问题是不知道这个 svg 是哪里引入过来的,不知道怎么改,明显是框架作者自己打包的,而不是从 fa 之类的地方引用。搜了搜源码文件夹完全搜不到 svg 字符串
|
11
sgiyy 2022-02-15 16:21:46 +08:00
@LeeReamond #10 像这种一般都是通过从别的 icon 网站上引入一个 js 文件,加载 SVG 文件。你检查下 head 标签里有没有 src 是这样的 script 标签 <script src="//at.alicdn.com/t/font_xxx_xxx.js"></script>,如果是的话你需要从找项目开发者要一下这个 iconfont 的权限。
或者,你下载一个 SVG 文件,原页面上直接替换你想要修改的地方,这是最简单的 |
12
LeeReamond OP @sgiyy 老哥好牛啊,预测文件名都分毫不差怎么做到的。原作者最近联系不上一直没回我消息,我直接用其他方式把这个文件自己提供服务了不就行了
|
13
sgiyy 2022-02-16 11:27:56 +08:00
@LeeReamond #12 iconfont 现在前端项目用的比较多,所以大胆猜测了下。能联系上最好,方便后期维护;联系不上就自己单独替换这个图标吧。
|