在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法

1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所在<style>标签内的所有代码

2.将代码粘贴到自己的编辑器上

创建iconfont.css文件,把上图中的style内容复制到文件中,这就是我们的css文件了.

3.下载svg,woff,ttf,eot文件

看到上图中的https://xxx.eot/.woff/.ttf了吗,这是iconfont的下载地址,在网页上输入即可下载到.woff,ttf,eot格式的iconfont文件.这些iconfont文件就是网站所有iconfont图标集合

对于svg,由于svg网页上显示,不是自动下载,我们可以手动复制svg上的内容,粘贴到自己创建的svg文件上面(我是把iconfont官网上下载的svg内容清空,把仿站的svg内容粘贴上去)

4.修改iconfont.css代码

这几个都下载完成,并且在一个文件夹内,我们就可以修改iconfont.css文件中的https路径了,去掉网址,改为如下路径

5.可以测试iconfont了,根据仿站的iconfont使用,比如下图,我们在自己的代码中这么写,发现可以正确显示iconfont图标了

仿站-获取网站的所有iconfont图标的更多相关文章

  1. 仿站技术——获取和使用某些网站的iconfont图标字体

    前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...

  2. PHP获取网站图标（favicon.ico）文件

    有的网站源码中加入了这几行代码: <link rel="shortcut icon" href="/favicon.ico" type="ima ...

  3. 如何获取不同网站的favicon默认图标

    参考文章: 1.利用公共api提取任意网站favicon.ico图标 如何读取favicon 根据设置favicon的方式,就有2种读取favicon的方法:   A.默认直接读取网站根目录的favi ...

  4. 再谈获取网站图标Icon

    上一篇文章讨论了一下获取网站图标方法,是通过从根目录直接获取和html解析结合的方式来获取的,并给出了相应的代码示例.这一篇来讨论一个更现成的方法,这个方法是从360导航的页面发现的,在导航页面中点击 ...

  5. mac使用wget下载网站（仿站）

    wget -c -r -np -k -L -p http://www.xxxx.com 参考 wget的安装 http://blog.csdn.net/ssihc0/article/details/7 ...

  6. 获取网站图标Icon

    通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目.现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊." ...

  7. A：手把手教Wordpress仿站（基础）

    安装源码 需要服务器有php环境(PHP,Mysql,Apeach/Ngnax) 我用的主机宝(环境一键安装工具)   打开后台突然出现这种情况 Briefly unavailable for sch ...

  8. Zencart视频教程 Zencart模板制作教程视频 Zencart仿站教程资料

    Zen Cart是国外一个免费的.界面友好,开放式源码的购物车软件,是目前外贸行业使用最为广泛的网站程序.本仿站技术需要你有一定的html和css基础,易学易懂,一步一步地教你操作和使用Zen Car ...

  9. 使用PHP获取网站Favicon的方法

    使用PHP获取网站Favicon的方法 Jan022014 作者:Jerry Bendy   发布:2014-01-02 23:18   分类:PHP   阅读:4,357 views   20条评论 ...

随机推荐

  1. SpeedButton

    SpeedButton是一个图形控件,本身没有句柄.因此它不能具有焦点.你可以使用TBitBtn,调整一些属性,可以使他们的外形很接近. 只有从TWinControl派生的控件,才具有Handle.你 ...

  2. DPK

    一.概念 dpk文件是Delphi的包文件,有dpk文件的组件安装比较方便.一般来说,支持不同版本Delphi的组件会有不同的dpk文件,一般以7结尾的dpk文件是支持Delphi 7的.如果没有支持 ...

  3. CAS原理解析

    CAS底层原理 概念 CAS的全称是Compare-And-Swap,它是CPU并发原语 它的功能是判断内存某个位置的值是否为预期值,如果是则更改为新的值,这个过程是原子的 CAS并发原语体现在Jav ...

  4. Flutter环境安装，ios真机调试

    MAC: 下载Flutter,官网的可能很慢.可以去我的网盘下载, 提取码: 3t6y. 下载完的包会在~/Downloads目录下,我们移到~/opt/flutter目录下. mkdir ./opt ...

  5. [PHP] 获取IP 和JS获取IP和地址

    通过js获取 服务器 ip 服务器端口 服务器地址 var address=window.location.href; thisDLoc = document.location; var hostpo ...

  6. 使用NLP从文章中自动提取关键字

    背景 在研究和新闻文章中,关键词构成了一个重要的组成部分,因为它们提供了文章内容的简洁表示.关键词在从信息检索系统,书目数据库和搜索引擎优化中定位文章方面也起着至关重要的作用.关键词还有助于将文章分类 ...

  7. 数值计算方法实验之Newton 多项式插值(MATLAB代码)

    一.实验目的 在己知f(x),x∈[a,b]的表达式,但函数值不便计算或不知f(x),x∈[a,b]而又需要给出其在[a,b]上的值时,按插值原则f(xi)=yi (i=0,1,……, n)求出简单函 ...

  8. fasttext的使用，预料格式，调用方法

    数据格式:分词后的句子+\t__label__+标签 fasttext_model.py from fasttext import FastText import numpy as np def ge ...

  9. Docker 中如何安装配置 Nginx

    拉取 nginx 最新版镜像,然后简单启动一个 nginx 容器: docker pull nginx:latest docker run --name nginx01 -d -p 80:80 ngi ...

  10. ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓

    现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...