前言:
很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座)。所以此文章介绍一下如何获取和使用网站的iconfont,该技术仅供学习交流,请勿用于任何商业行为。


工具:
1.代码编辑器(本人sublime),2.浏览器(本人火狐),3.迅雷,4.使用iconfont的网站(1号店),一个空css文件。
开始:
先看看什么是iconfont,如下图中的图标:

![该图标并不是普通的图片
正式开始:
1.打开页面—>右键—>查看网页源码—>搜索“type="text/css”找到该网页的css文件的路径。

2.打开css链接,Ctr+a—>Ctr+c将内容全部复制到事先准备的css文件中。

3.看着很大很乱一堆是吧,别着急,打开百度搜索“css快速格式化”,打开第一个链接,将乱糟糟的css文件复制进去,选择竖向排列,然后再将处理好的css内容复制回去,瞬间就好看多了是不是。

4.搜索:“@font-face”定位到如图的地方,将如图的四个文件用迅雷下载到同一个文件夹中。

5.下载好了就该使用了哒。使用可以参考www.iconfont.cn阿里巴巴开源的教程。

<?php
echo "改天再来续写用法,去嘘嘘一下,有点涨"
?>

用法简述:
既然已经把字体文件扒了下来了,不用就对不起人民的教育培养了。好!现在开始使用。
1.首先看看原网页的代码结构。同样:右键—>查看源码—>第一幅图显示那个图标和“进口食品”是挨在一起的,所以我们在源码中搜索“进口食品”。定位到如图的地方。看箭头标的地方了吗?那个就是我们需要在页面中书写的东东。简单分析说明一下,前面那个class="hd_iconfont"表示此处要引用字体图标,后面那个这个东东(有分号哟)表示引用字体图标库中具体哪一个图标。

2.当然这只是在html中引用了,那既然是字体图标,那就隶属于字体,那字体就应该可以设置字体样式,这也就iconfont相比于传统的icon最大好处了(不用看美工脸色啦啦啦啦啦)。
3.打开你的css文件,在文中开头部分加入以下代码,也就是我们定位@font-face 找字体文件的内容,复制过来就行(注意修改路径)。

@font-face {font-family: 'iconfont';
src: url('../iconfont/iconfont.eot');
src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
url('../iconfont/iconfont.woff') format('woff'),
url('../iconfont/iconfont.ttf') format('truetype'),
url('../iconfont/iconfont.svg#iconfont') format('svg');
}


4.然后像平时设置字体样式一样,找到他,然后贴入以下代码

display:inline-block;
width:28px;
margin-right:10px;
text-align:right;
vertical-align:middle;
text-decoration:none;
font-family:"iconfont";
font-size:18px;
font-style:normal;
color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

5.作为新手就不要乱改代码了哈不然灰常容易出不来效果的dedededededede..........
6.好啦,有什么问题就留言吧 ,因为我又要去 <?php echo "嘘嘘" ?>啦~

(此插图为小编所配,不用谢。。。)

仿站技术——获取和使用某些网站的iconfont图标字体的更多相关文章

  1. 仿站-获取网站的所有iconfont图标

    在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...

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

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

  3. mac使用wget下载网站(仿站)

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

  4. A:手把手教Wordpress仿站(基础)

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

  5. (转) Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么?

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么? 建站有很多技术,如 HTML.HTML5.XHT ...

  6. Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么(转)

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

  7. dede仿站笔记

    仿站步骤查看是否为dedecms的方法,看引用路径src="/templets/default2012/images/toutiao.png" 0查看仿站编码,选择utf8或gbk ...

  8. [zencart教程]zencart外贸建站仿站交流俱乐部

    [zencart教程]zencart外贸建站仿站交流俱乐部 1.你想自主一天仿做一个精美的zencart 外贸网站; 2.你想自已自主定制精美的psd 图 zencart模板,并把它变成自定义精美 z ...

  9. 使用webcollector爬虫技术获取网易云音乐全部歌曲

    最近在知乎上看到一个话题,说使用爬虫技术获取网易云音乐上的歌曲,甚至还包括付费的歌曲,哥瞬间心动了,这年头,好听的流行音乐或者经典老歌都开始收费了,只能听不能下载,着实很郁闷,现在机会来了,于是开始研 ...

随机推荐

  1. 解读HTTP/3

    技术的发展总是让人目不暇接,2018年10月,HTTP/3又发布了.虽然已经有一些中文技术媒体做了报道,但大多数是翻译的,而且内容大同小异.最近我专门学习了点关于HTTP/3的知识,在这里随便写写,和 ...

  2. 利用onMouseOver和onMouseOut实现图像翻滚

    代码: <img src="images/001.jpg" alt="pic" onmouseover="this.src='images/00 ...

  3. CentOS 7 - 以root身份登入Gnome

    新版的7.0很多资料没有,为了安全,linux是禁止root登录到桌面,但为了方便又想用root登录到桌面,在网上找了找,基本上都是这这一篇: http://shaoguangleo.blog.163 ...

  4. python多任务的实现:线程,进程,协程

    什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务.打个比方,你一边在用浏览器上网,一边在听MP3,一边在用Word赶作业,这就是多任务,至少同时有3个任务正在运行.还有很多任务悄悄地在后 ...

  5. Flink源码分析 - 剖析一个简单的Flink程序

    本篇文章首发于头条号Flink程序是如何执行的?通过源码来剖析一个简单的Flink程序,欢迎关注头条号和微信公众号"大数据技术和人工智能"(微信搜索bigdata_ai_tech) ...

  6. AM335X有关MMC的启动参数问题分析

    AM335X有关MMC的启动参数问题分析 一. 问题来源 硬件平台:AM335X芯片 SDK版本:ti-processor-sdk-linux-am335x-evm-03.00.00.04-Linux ...

  7. shell编程之99乘法表

    #99乘法表#!/bin/bash #第一种写法 ` #`seq ` 使用反撇号括起来的(不是单引号),表示命令替换 do for j in `seq $i` #seq可以使用变量 do echo - ...

  8. Python,while循环小例子--猜拳游戏(三局二胜)

    Python,while循环小例子--猜拳游戏(三局二胜) import random all_choice = ['石头', '剪刀', '布'] prompt = '''(0)石头 (1)剪刀 ( ...

  9. Codeforces F. Vus the Cossack and Numbers(贪心)

    题目描述: D. Vus the Cossack and Numbers Vus the Cossack has nn real numbers aiai. It is known that the ...

  10. ThinkPHP模板之一

    这个东东,就得多练多写,无它法. 1,Application\Home\Controller\IndexController.class.php <?php namespace Home\Con ...