在仿站过程中,网站的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. GitHub 热点速览 Vol.16：化身蒙娜丽莎和乔布斯对话

    摘要:妙趣横生,上周的 GitHub 热点的关键词.无论是让你化身为爱因斯坦开启会议脑暴模式 avatarify,还是和上周人人都是抠图师项目的同门项目 3D 照片修复:3d-photo-inpain ...

  2. 【Jenkins】插件更改国内源

    最近调试脚本,本机安装了Jenkins,但是安装插件时一直失败.更改升级站点也不生效,究其原因是因为default.json中插件下载地址还https://updates.jenkins.io,升级站 ...

  3. 中国剩余定理（CRT）

    只看懂了CRT,EXCRT待补.... 心得:记不得这是第几次翻CRT了,每次都有迷迷糊糊的.. 中国剩余定理用来求解类似这样的方程组: 求解的过程中用到了同余方程. x=a1( mod x1) x= ...

  4. 批量重命名脚本（Python）

    便携的批处理脚本,代码如下: import os import sys def rename(): path=input("请输入路径(例如D:/picture):") name= ...

  5. Java 解析 xml 常见的4中方式：DOM SAX JDOM DOM4J

    Java 四种解析 XML 的特点 1.DOM 解析: 形成了树结构,有助于更好的理解.掌握,且代码容易编写. 解析过程中,树结构保存在内存中,方便修改. 2.SAX 解析: 采用事件驱动模式,对内存 ...

  6. 国外程序员整理的 PHP 资源大全

    原文:http://blog.jobbole.com/82908/ ziadoz 在 Github 发起维护的一个 PHP 资源列表,内容包括:库.框架.模板.安全.代码分析.日志.第三方库.配置工具 ...

  7. elementaryos5安装chrome，修复依赖

    1.首先去下载个chrome:https://www.google.cn/chrome/ 2.尝试安装chrome:sudo dpkg -i google-chrome-stable_current_ ...

  8. nginx 配置大吞吐量

    ng做反向代理服务是如果没有这两行配置吞吐量到8000-10000就上不去. proxy_http_version 1.1; # 后端配置支持HTTP1.1,必须配 proxy_set_header ...

  9. （第三篇）SSH网络协议概述

    ssh简介原理 windows远程登录,QQ远程协助修电脑 简单说,SSH是一种网络协议,用于计算机之间的加密登录.最早的时候,互联网通信都是明文通信,一旦被截获,内容就暴露无疑.1995年,芬兰学者 ...

  10. docker（2）

    docker三大核心组件的概念 1镜像: Docker 镜像类似于虚拟机镜像,可以将它理解为一个只读的模板.例如,一个镜像可以包含一个基本的操作系统环境,里面仅安装了 Apache 应用程序(或用户需 ...