复制远程CSS内容到本地.css文件后对应图标无法显示问题咨询

问题原因 #

你使用的lightgallery.min.css中通过相对路径引用了配套的图标字体资源，原CSS存放在CDN的/lightgallery/1.3.9/css/目录下，字体资源存放在同层级的/lightgallery/1.3.9/fonts/目录下，CSS内写的相对路径为../fonts/xxx。你把CSS单独保存到本地后，本地没有对应路径的字体文件，因此图标无法正常加载。

解决方法 #

• 方案一：本地部署完整资源
  下载对应版本的所有lightgallery图标字体文件（包含lightgallery.woff、lightgallery.woff2、lightgallery.ttf、lightgallery.eot、lightgallery.svg五个文件），在你本地CSS文件的上级目录新建fonts文件夹，把下载的字体文件全部放入该文件夹即可，保证CSS内的相对路径可以正常匹配到资源。
• 方案二：修改CSS内的字体引用路径为绝对路径
  打开本地保存的lightgallery.min.css，把所有url('../fonts/lightgallery开头的资源引用，全部替换为url('https://cdn.jsdelivr.net/lightgallery/1.3.9/fonts/lightgallery，无需下载字体文件，直接引用公共CDN的资源即可正常显示图标。

提示：如果后续升级lightgallery版本，需要同步替换对应版本的字体文件或调整路径中的版本号，避免版本不匹配导致图标显示异常。

内容的提问来源于stack exchange，提问作者Shirley Nikkitha