FontAwesome图标在同一窗口中显示不同

时间:2019-01-24 10:41:30

标签: css font-awesome

我发生了一件奇怪的事情,无论使用什么浏览器,它似乎都在发生。 我们正在使用4.6.3版。这是html的示例:

    <li data-id="316" class="nav-item nav-leaf selectable-nav-item">
    <x-icon>
	<svg class="fa fa-file-text-o">
		<use xlink:href="#fa-file-text-o">
		#shadow-root (closed)
		<svg id="fa-file-text-o" viewBox="0 0 1000 1000" width="100%" height="100%">
      			<path d="M819.196 212.054q15.625 15.625 26.786 42.411t11.161 49.107v642.857q0 22.321-15.625 37.946t-37.946 15.625h-750q-22.321 
			0-37.946-15.625t-15.625-37.946v-892.857q0-22.321 15.625-37.946t37.946-15.625h500q22.321 0 49.107 11.161t42.411 26.786zM571.429 
			75.893v209.821h209.821q-5.58-16.183-12.276-22.88l-174.665-174.665q-6.696-6.696-22.88-12.276zM785.714 928.571v-571.429h-232.143q-22.321 
			0-37.946-15.625t-15.625-37.946v-232.143h-428.571v857.143h714.286zM214.286 446.429q0-7.813 5.022-12.835t12.835-5.022h392.857q7.813 0 12.835 
			5.022t5.022 12.835v35.714q0 7.813-5.022 12.835t-12.835 5.022h-392.857q-7.813 0-12.835-5.022t-5.022-12.835v-35.714zM625 571.429q7.813 0 12.835 
			5.022t5.022 12.835v35.714q0 7.813-5.022 12.835t-12.835 5.022h-392.857q-7.813 0-12.835-5.022t-5.022-12.835v-35.714q0-7.813 
			5.022-12.835t12.835-5.022h392.857zM625 714.286q7.813 0 12.835 5.022t5.022 12.835v35.714q0 7.813-5.022 12.835t-12.835 5.022h-392.857q-7.813 
			0-12.835-5.022t-5.022-12.835v-35.714q0-7.813 5.022-12.835t12.835-5.022h392.857z"></path>
    		/svg>
		</use>
	</svg>
    </x-icon>
    <span style="z-index:99" class="nav-text" id="tree-search_316_">waterproof sheeting</span></li>
    <li data-id="319" class="nav-item nav-leaf selectable-nav-item">
    <x-icon>
	<svg class="fa fa-file-text-o">
		<use xlink:href="#fa-file-text-o">
		#shadow-root (closed)
		<svg id="fa-file-text-o" viewBox="0 0 1000 1000" width="100%" height="100%">
      			<path d="M819.196 212.054q15.625 15.625 26.786 42.411t11.161 49.107v642.857q0 22.321-15.625 37.946t-37.946 15.625h-750q-22.321 
			0-37.946-15.625t-15.625-37.946v-892.857q0-22.321 15.625-37.946t37.946-15.625h500q22.321 0 49.107 11.161t42.411 26.786zM571.429 
			75.893v209.821h209.821q-5.58-16.183-12.276-22.88l-174.665-174.665q-6.696-6.696-22.88-12.276zM785.714 928.571v-571.429h-232.143q-22.321 
			0-37.946-15.625t-15.625-37.946v-232.143h-428.571v857.143h714.286zM214.286 446.429q0-7.813 5.022-12.835t12.835-5.022h392.857q7.813 0 12.835 
			5.022t5.022 12.835v35.714q0 7.813-5.022 12.835t-12.835 5.022h-392.857q-7.813 0-12.835-5.022t-5.022-12.835v-35.714zM625 571.429q7.813 0 12.835 
			5.022t5.022 12.835v35.714q0 7.813-5.022 12.835t-12.835 5.022h-392.857q-7.813 0-12.835-5.022t-5.022-12.835v-35.714q0-7.813 
			5.022-12.835t12.835-5.022h392.857zM625 714.286q7.813 0 12.835 5.022t5.022 12.835v35.714q0 7.813-5.022 12.835t-12.835 5.022h-392.857q-7.813 
			0-12.835-5.022t-5.022-12.835v-35.714q0-7.813 5.022-12.835t12.835-5.022h392.857z"></path>
    		/svg>
		</use>
	</svg>
    </x-icon>

可以看出,两个图标的设置方式相同。此图标描绘了一个页面,该页面的拐角处折叠有3条水平线。一些图标可以正确显示,而其他图标的线条似乎靠得更近。如果我使用CTL +鼠标滚轮增加了视口的大小,则图标将看起来相同。视口设置为100%或更小时,只有较小的尺寸会出现问题。

0 个答案:

没有答案
相关问题