网页常见图标用自定义字体实现

格式：doc
大小：13.26 KB
文档页数：5

下载文档原格式

/ 5

前端开发中的字体与图标处理方法

前端开发中的字体与图标处理方法在现代互联网时代，网页设计变得愈发重要，其中字体与图标的选择和处理更是至关重要的一环。

在前端开发中，如何高效地处理字体和图标，既能保持网页的美观，又能提高用户体验，是一个不可忽视的问题。

本文将介绍一些前端开发中常用的字体与图标处理方法，希望能对广大开发者提供一些参考。

一、字体处理方法1. 使用Web安全字体Web安全字体是指在所有主流操作系统中都能正常显示的字体。

常见的Web 安全字体包括Arial、Verdana、Times New Roman等。

在开发过程中，可以使用这些字体来确保用户在不同设备和浏览器上都能正确地显示文本内容。

2. 自定义字体如果需要使用特定的字体风格来与网站的整体风格相匹配，可以考虑自定义字体。

通过在CSS样式表中设置@font-face规则，将字体文件引入到网页中。

这样，即使用户没有安装该字体，也能在网页上正确显示。

但需要注意的是，使用自定义字体可能会增加网页加载时间，因此需要合理权衡。

3. 字体图标字体图标是一种将图标以字体的方式引入网页中的方法，常见的字体图标库包括Font Awesome、Glyphicons等。

通过使用Unicode编码，可以在HTML中直接通过标签和CSS样式进行字体图标的调用和样式设置。

与传统的图片图标相比，字体图标具有矢量性、可缩放性和颜色可控性等优势，更易于定制和维护。

二、图标处理方法1. Raster图标Raster图标是使用像素网格来构建的图标，常见的格式有PNG、JPEG等。

Raster图标适用于复杂的图标设计，可以展现更精细的细节。

然而，由于其固定的分辨率特性，如果在高分辨率屏幕上显示时，图标可能会失真或模糊。

因此，在使用Raster图标时，需要提供适配不同设备分辨率的不同版本，从而保证图标的清晰度和清晰度。

2. 矢量图标矢量图标是使用数学方程来定义的图标，常见的格式有SVG、AI等。

与Raster图标相比，矢量图标具有无限缩放性，无论尺寸如何变化，都能保持图标的清晰度和细节。

使用CSS实现自定义字体样式

使用CSS实现自定义字体样式字体在网页设计中扮演着重要的角色，能够直接影响到网页的美观度和阅读体验。

除了常用的系统字体外，我们也可以通过CSS来实现自定义字体样式，以满足不同设计需求。

本文将介绍如何使用CSS实现自定义字体样式，并提供一些实用的技巧。

一、引入自定义字体文件首先，我们需要准备自定义字体文件，通常为.ttf或.otf格式。

在CSS中，我们可以通过@font-face规则来引入这些字体文件，并为其定义一个名字。

具体的代码如下所示：```@font-face {font-family: 'customfont'; /* 自定义字体的名字 */src: url('customfont.ttf') format('truetype'); /* 字体文件的路径和格式*/}```在上面的代码中，我们通过font-family属性为自定义字体命名为'customfont'，同时指定了字体文件的路径和格式。

二、使用自定义字体样式一旦我们引入了自定义字体文件，就可以在网页中使用自定义字体样式了。

以下是如何使用自定义字体的代码示例：```body {font-family: 'customfont', sans-serif; /* 使用自定义字体 */}h1 {font-family: 'customfont', sans-serif; /* 使用自定义字体 */font-size: 24px;font-weight: bold;}p {font-family: Arial, sans-serif; /* 使用默认字体 */font-size: 16px;}```在上述代码中，我们通过font-family属性将自定义字体'customfont'应用到了body、h1元素上。

使用逗号和sans-serif作为后备字体，当自定义字体无法正常加载时，将会使用默认的sans-serif字体。

icon font的使用

icon font的使用标题：Icon Font的应用与优势引言：在现代网页设计中，图标的使用已经成为一种趋势。

而Icon Font 作为一种优秀的图标解决方案，具有独特的优势和应用场景。

本文将介绍Icon Font的基本概念、使用方法以及与传统图片图标的比较，以便读者更好地了解和应用Icon Font。

一、Icon Font简介1.1 什么是Icon FontIcon Font是一种基于字体的图标解决方案，通过将图标以字体的形式嵌入网页中，实现图标的展示和使用。

1.2 Icon Font的优势- 矢量化：Icon Font以矢量的形式存在，可以无损放大和缩小，保持图标的清晰度和细节。

- 可定制性：通过CSS样式和字体编辑工具，可以轻松调整Icon Font的颜色、大小、阴影等效果。

- 可搜索性：与传统图片图标相比，Icon Font可以通过文本搜索和编辑，提高网页的可访问性和维护性。

二、Icon Font的使用方法2.1 引入Icon Font- 将Icon Font的字体文件（通常为.ttf或.woff格式）下载到本地，并通过CSS样式表引入。

2.2 使用Icon Font- 在HTML中使用特定的CSS类名来调用Icon Font，如``。

- 可以通过添加额外的CSS样式来修改Icon Font的大小、颜色和其他效果。

三、Icon Font与传统图片图标的比较3.1 性能优势- Icon Font的字体文件相对较小，加载速度更快，减少网页的加载时间和带宽消耗。

- Icon Font的缓存机制更好，可以有效减少重复加载。

3.2 可维护性和可访问性- Icon Font可以通过CSS样式表进行统一管理和调整，方便维护和更新。

- Icon Font可以通过文本搜索和编辑，提高网页的可访问性和搜索引擎优化。

在线制作自定义字体

在线制作⾃定义字体本⽂介绍如何使⽤现有的免费⼯具制作⾃定义的字体。

我们将会⽤到下⾯⼏个免费的在线⼯具。

IconMoon是⼀个优秀的免费创建⾃定⽹页图标字体的⼯具。

提供⼀个在线的字体制作APP，也提供离线版的Chrome插件，同时还提供免费开源的图标供⼤家选⽤。

⽀持上传SVG格式的图标或者单个字符。

EverythingFonts提供了丰富的字体转换⼯具，可以把ttf，otf，wotf等字体转换为SVG格式。

使⽤上⾯两个⼯具我们就能够把⾃⼰喜欢的开源字符“搬”到我们的⾃定义字体中去。

第⼀步：使⽤字体转换⼯具把TTF转成SVG格式。

有⼀些开源的字体已经提供了SVG格式（例如：fontawesome-webfont.svg）可以下后⾯的步骤中直接上传，就不需要字体转换这⼀步了。

当我们找不到SVG格式的字体的时候就⽐较适合⽤到这个⼯具。

EverythingFonts 的字体转换器使⽤⽐较简单，a) 打开⽹页，确认没有版权问题，勾选“The EULAs of the font allow this conversion: ”b) 后点蓝⾊的“Pickup Font File”按钮从本地上传TTF字体⽂件。

c) 然后点绿⾊的“Convert”按钮就可以下载转换后的SVG⽂件了。

转换后的SVG⽂件是包含字符编码的，在后⾯我们导⼊之后别的字体的A也就会是我们⾃定义字体的A。

第⼆步：开始制作我们⾃⼰的字体打开之后免费的iconmoon图标已经显⽰在你⾯前了，可以直接选⽤也可以点击最后⾯的“Add Icons From Library…”链接去图标库⾥⾯去选。

【2】新建⼀个空的图标集，这样便于我们分类选⽤。

【4】使⽤图标集旁边的“import to set”菜单项，导⼊我们之前制作（或者开源）的.svg⽂件。

也可以在这⾥上传你⾃⼰⾃作的SVG单个字符。

【5】编辑字符如果是从别的字体导⼊过来的，有时候会发现实际排版会出现字符宽度不⼀的问题，这样的话我们就需要通过iconmoon的编辑功能进⾏修改。

网页字体设置源代码

网页字体设置源代码一、文字大小、字体、颜色1. 设置文字大小的属性是"size"他的取值范围是1到7。

其中1为最小，7为最大格式：＜fonr size=文字大小＞被设置的字＜/font＞2. 设置文字字体属性是"face"格式：＜font face=文字字体＞被设置的字＜/font＞3. 设置文字颜色的属性是"color"格式：＜fonr color=文字颜色＞被设置的字＜/font＞二、文字其它基础效果1. 文字加粗：＜b＞被设置的字＜/b＞2. 文字斜体：＜i＞被设置的字＜/i＞3. 文字下划线：＜u＞被设置的字＜/u＞4. 文字删除线：＜s＞被设置的字＜/s＞5. 文字移动格式：＜marquee *Amount="移动速度" direction="方向" ＞被设置的字＜/marquee＞设置移动速度属性是*Amount，他的取值范围是1到10。

其中1为最慢，10为最快设置移动方向属性是direction，"up"（上），"down"（下），"left"（左），"right"（右）三、文字段落设置1. 文字换行：换行标记是＜br＞，放在文字结尾处使得其后的文字在下一行显示2. 文字段控制：段落标记是＜p＞，放在文字后，使其后文字空一行后换行显示这里介绍＜p＞标记的一个简单属性："align"用来设置文字段落的对齐方式。

属性值有"center"（居中对齐），"left"（向左对齐），"right"（向右对齐）格式：＜p align=属性值＞被设置的段落＜/p＞3. 文字的分区显示：标记为＜div＞，属性同＜p＞格式：＜div align=属性值＞被设置的段落＜/div＞四、文字链接设置1. 点击文字转到链接地址格式：＜a href="所要连接的相关地址"＞被设置的字＜/a＞2. 点击文字在新窗口中打开链接地址格式：＜a href="相关地址" target="_blank"＞被设置的字＜/a＞五、文字特效1. 彩色字体色彩绚丽彩色字体色彩绚丽<FONTcolor=#ff0000>彩色字体色彩绚丽2. 阴影字体阴影字体3. 围边字体围边字体围边字体4. 投影字体投影字体 投影字体</CAPTION> </CAPTION>5. 抛射字体抛射字体<DIV *="FILTER: shadow(color=#FF9999, strength=60); WIDTH: 480px; HEIGHT: 121px" align=center><CENTER>抛射字体</CENTER> </DIV>6. 倒影字体倒影字体倒影字体倒影字体倒影字7. 向上移动的文字向上移动的文字<TABLE *="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="100%" border=0><Tｂｏｄｙ><TR><TD *="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"> <DIV align=center><MARQUEE *="WIDTH: 397px; HEIGHT: 200px" *Amount=5 direction=up>向上移动的文字</MARQUEE></DIV></TD></TR></T ｂｏｄｙ></TABLE>8. 向下移动的文字向下移动的文字<TABLE *="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="100%" border=0><Tｂｏｄｙ><TR><TD *="FONT-SIZE: 11pt; LINE-HEIGHT: 15pt" width="100%"> <DIV align=center><MARQUEE *="WIDTH: 397px; HEIGHT: 200px" *Amount=8 direction=down>向下移动的文字</MARQUEE></DIV></TD></TR></Tｂｏｄｙ></TABLE>9. 向左移动的文字向左移动的文字 <MARQUEE *="WIDTH: 397px; HEIGHT: 200px" *Amount=5 direction=left>向左移动的文字</MARQUEE>10. 向右移动的文字向右移动的文字<MARQUEE *="WIDTH: 397px; HEIGHT: 200px" *Amount=5 direction=right>向右移动的文字</MARQUEE>11. 由中间向两边移动的文字由中间向两边移动的文字由中间向两边移动的文字<MARQUEE width=200 height=50>由中间向两边移动的文字</MARQUEE><MARQUEE direction=right width=200 height=50>由中间向两边移动的文字</MARQUEE>12. 由上下向中间移动的文字由上下向中间移动的文字由上下向中间移动的文字 <MARQUEE *Amount=2 direction=down height=60> 由上下向中间移动的文字</MARQUEE> <MARQUEE *Amount=2 direction=up height=60>由上下向中间移动的文字</MARQUEE> 文字连续滚动代码<marquee direction=方向loop=循环次数behavior=滚动形式dataformatas=文字类型width=字符滚动窗口的宽度height=字符滚动窗口的高度scrolldelay=每次循环的间隔时间scrollamount=每次移动的长度bgcolor=滚动窗口的背景颜色> …………要滚动的文字…………</marquee>direction：这个标记是说明所要滚动的文字是向哪个方向滚动的，它的参数有：left,right,up,downleft：文字自右向左滚动right：文字自左向右滚动up：文字自下向上滚动down：文字自上向下滚动<marquee></marquee>这个标记是IE特有的，NETSCAPE是浏览不到这效果的loop：如果想让文字无限循环，则参数是"-1"；如果不是可以自行设置循环次数behavior：滚动形式，有scroll，alternate,slide等。

前端开发中的字体优化和字体图标使用技巧和资源推荐

前端开发中的字体优化和字体图标使用技巧和资源推荐字体在前端开发中起着至关重要的作用，不仅会影响网页的可读性和美观程度，还会影响网页的加载速度和性能。

在字体优化方面，我们可以通过优化字体的加载方式、选择合适的字体格式以及字体资源的压缩来提高网页的加载速度和性能。

而在字体图标的使用方面，我们可以用字体图标替代传统的图片图标，实现对图标的自定义和灵活控制。

本文将重点介绍字体优化和字体图标使用的一些技巧和推荐资源。

1. 字体优化技巧在前端开发中，字体的加载速度和性能是我们需要重点关注和优化的地方。

以下是一些字体优化的技巧和方法。

1.1 压缩字体文件字体文件通常较大，使用压缩工具可以有效减小字体文件的大小，从而提高字体的加载速度。

常用的字体压缩工具有Font Squirrel、FontForge等，它们可以对字体文件进行无损压缩，同时支持多种字体格式。

1.2 使用适当的字体格式在选择字体格式时，需要根据网页的需求和目标用户设备的支持情况来选择。

常见的字体格式有TTF、EOT、WOFF和WOFF2等。

如今，WOFF和WOFF2已成为主流的字体格式，它们能够在大多数现代浏览器中得到支持，并具有更好的压缩效果和加载速度。

1.3 提前加载字体文件为了避免用户在页面加载过程中等待字体文件的下载，可以通过CSS的@font-face规则提前加载字体文件。

@font-face规则允许web开发者定义自己的字体，使网页能够使用自定义的字体。

通过提前加载字体文件，可以确保字体在页面渲染时能够立即可用，提高用户体验。

2. 字体图标的使用技巧和推荐资源传统的图片图标在前端开发中存在一些问题，比如体积大、不易修改和维护等。

而字体图标由于是矢量图形，具有易扩展、易修改和易维护的特点，因此在前端开发中得到广泛应用。

以下是一些字体图标使用的技巧和推荐资源。

2.1 使用合适的字体图标库目前，市面上有很多优秀的字体图标库可供选择，如Font Awesome、Iconfont、Material Icons等。

icones的使用

Icones的使用Icones是一种用于网页设计和开发的图标字体。

它提供了一系列矢量图标，可以通过简单的HTML代码在网页中使用。

Icones的使用可以为网页增添视觉吸引力，提高用户体验，同时也可以简化开发过程，减少图像文件的加载和请求。

1. 什么是IconesIcones是一种基于矢量图形的图标字体库。

它使用字体文件的方式来呈现图标，这意味着图标可以随着字体的大小进行缩放而不会失真。

Icones提供了丰富多样的图标，包括社交媒体图标、箭头图标、设备图标等等，可以满足各种网页设计和开发的需求。

2. Icones的优势Icones相对于传统的图像文件有许多优势，下面列举了几个主要的优势：2.1 矢量图形Icones使用矢量图形来呈现图标，这意味着图标可以无损地进行缩放和放大。

无论是在高分辨率屏幕上还是低分辨率屏幕上，图标都可以保持清晰锐利。

这种矢量图形的特性使得Icones在不同设备和屏幕尺寸上都能够提供一致的用户体验。

2.2 轻量级由于Icones使用字体文件来呈现图标，相比于传统的图像文件，它的文件体积更小。

这意味着网页加载速度更快，用户无需等待大量图像文件的下载。

同时，Icones的字体文件可以被缓存，减少了网络请求的次数，提高了网页的性能。

2.3 易于使用Icones的使用非常简单，只需要在HTML代码中引入相应的字体文件，并使用特定的类名来指定图标即可。

这种简单的使用方式使得开发人员可以快速地将图标应用到网页中，不需要额外的图像编辑工作。

2.4 可定制性Icones提供了多种图标样式和主题，可以根据网页设计的需求进行定制。

开发人员可以自定义图标的颜色、大小和样式，以适应不同的设计风格。

3. 如何使用Icones使用Icones非常简单，下面是一些基本的步骤：3.1 引入字体文件首先，需要在HTML文件中引入Icones的字体文件。

可以通过下载字体文件并将其放置在项目的文件夹中，然后使用@font-face规则将其引入到CSS中。

利用WebClip实现自定义应用名字和图标

利⽤WebClip实现⾃定义应⽤名字和图标1. 准备iPhone升级⾄iOS14以上 (不然可能会出现打开应⽤中间还是有⼀段空⽩页⾯过渡)参考博客了解webclip的基本信息下载Mac App Apple configurator22. 描述⽂件解析(直接上代码了)<dict><key>PayloadContent</key><array><dict><key>FullScreen</key><true/><key>IsRemovable</key><false/><key>Icon</key><data>base64编码(实际是需要填这个字段的太长了这⾥就略了)</data><key>Label</key><string>应⽤名</string><key>PayloadDescription</key><string>这个是webClip ⽤于替换应⽤启动更换图标之类的或者⽹页书签的⼀个桌⾯快捷打开的⽅式</string><key>PayloadDisplayName</key><string>WebClip内部名字</string><key>PayloadIdentifier</key><string>com.example.appclip.apple.webClip.managed.xxxooo</string><key>PayloadType</key><string>com.apple.webClip.managed</string><key>PayloadUUID</key><string>25F701C5-1305-42D4-B6C4-0FB453940C05</string><key>PayloadVersion</key><real>1</real><key>Precomposed</key><true/><key>URL</key><string>appcliplaunch://</string><key>TargetApplicationBundleIdentifier</key><string>com.sanche.AppClips</string></dict></array><key>PayloadDisplayName</key><string>WebClip描述⽂件的名字</string><key>PayloadIdentifier</key><string>com.example.appclip</string><key>PayloadRemovalDisallowed</key><true/><key>PayloadType</key><string>Configuration</string><key>PayloadUUID</key><string>95EF972A-9463-4037-83B8-7B23602F5C5D</string><key>PayloadVersion</key><integer>1</integer></dict></plist>3. 如何使⽤使⽤Apple configurator2配置好描述⽂件,然后再利⽤AirDrop传送到⼿机安装把描述⽂件托管到⽂件服务器上或者互联⽹⽹盘然后使⽤⼿机⾃带的Safari浏览器下载打开安装即可App Store下载第三⽅换图标App也可快速实现功能~ (良莠不齐,有些是要跳空⽩页再跳的,有些是跳捷径再跳的,有些是webclip处理好的~ ⽐如: 趣图标和捷径集以及捷径盒⾥的⼀些捷径)4. ⼤致原理获取bundleID,已知或者从调⽤App Store搜索api获取 ,替换TargetApplicationBundleIdentifier字段获取图标图⽚⽣成base64编码,替换Icon字段⽣成UUID等唯⼀标识,替换相关UUID标识替换应⽤名字段把各个需要替换的字段更新⽣成新的描述⽂件进⾏安装即可其实可以⼀个描述⽂件包含多个书签或者应⽤,因为内部PayloadContent那⼀层是⼀个array,我发现捷径集好像就是这样实现的⾄于签不签名好像并不影响使⽤5. 尝试⼀下这个微信替⾝(⽤⼿机Safari打开)iOS代码实现可以如下这样打开Safari加载远程配置⽂件即可:let downStr = "https:///gh/WangGuibin/MyFilesRepo/files/weixin.mobileconfig"let realURL = URL(string: downStr)UIApplication.shared.openURL(realURL!)。

前端开发中的图标库和字体库推荐

前端开发中的图标库和字体库推荐随着互联网的发展，前端开发的重要性日益凸显。

前端开发不仅仅要关注网页的布局和设计，还需要注重细节的处理，其中图标和字体的选择就非常重要。

本文将为大家推荐几个热门的图标库和字体库，希望能给前端开发者带来一些参考和启发。

一、图标库推荐1. Font AwesomeFont Awesome 是一款非常受欢迎的图标库，它提供了丰富多样的图标集合，包括常用的网络应用图标、社交媒体图标、导航图标等。

不仅可以通过字体的形式使用，还可以直接使用 SVG 图标，非常方便灵活。

而且，Font Awesome 还支持自定义样式和动画效果，使得网页更具有交互感。

2. Material Design IconsMaterial Design Icons 是 Google 推出的一套图标库，它基于 Material Design 概念，提供了一系列清晰简洁的图标。

这些图标可用于各种项目，包括网站、移动应用等。

Material Design Icons 提供了多种格式的图标，包括常见的 SVG、PNG、WebP 等。

同时，它还支持可定制化，用户可以根据自己的需求选择适合的图标风格和颜色。

3. IoniconsIonicons 是一款专注于移动端的图标库，它的图标风格简洁大方，并且适用于不同的平台和设备。

Ionicons 提供了丰富多样的图标，包括应用图标、设备图标、社交媒体图标等。

不仅可以通过字体的形式使用，还可以通过 SVG 使用，这样可以更好地适配各种分辨率和屏幕大小。

二、字体库推荐1. Google FontsGoogle Fonts 是由 Google 提供的免费字体服务，它拥有众多的开源字体供用户选择。

用户可以通过在网页上引用 Google Fonts 提供的链接来使用这些字体，非常方便。

Google Fonts 提供了丰富多样的字体风格，满足了不同项目的需求，包括谷歌的 Material Design 字体等等。

前端开发中如何使用图标字体库

前端开发中如何使用图标字体库在前端开发中，图标字体库是一种十分常用且强大的工具。

它不仅可以美化网页界面，还可以提升用户体验，增加可访问性，并且可以减小页面加载的时间。

本文将介绍什么是图标字体库，为什么要使用它，以及如何使用图标字体库。

一、图标字体库是什么？图标字体库是一种将图标以字体形式呈现的库。

它将图标设计为字符，并通过字体文件的方式引用到页面上。

通过使用这种字体文件，我们可以方便地以文本的方式将图标嵌入到网页中，而不需要使用图片或其他繁琐的方式。

二、为什么要使用图标字体库？1. 提升用户体验：使用图标字体库可以使网页看起来更加美观，增加用户停留时间和互动性。

通过使用图标来表示不同的操作或功能，用户可以更快速地理解并操作网页。

2. 增加可访问性：使用图标字体库可以提升可访问性，使得视力受损或无法触屏的用户也能够通过屏幕阅读器等工具正确地理解和使用图标。

3. 加快页面加载速度：相比于使用图片，使用字体文件加载图标可以减小页面的大小，从而提升页面的加载速度。

三、如何使用图标字体库？使用图标字体库一般需要以下几个步骤：1. 选择合适的图标字体库：目前，市面上有很多优秀的图标字体库，例如Font Awesome、Material Design Icons等。

根据项目需求选择合适的图标字体库。

2. 下载字体文件：在官方网站上下载所选择的图标字体库的字体文件。

字体文件通常包括.woff、.woff2、.ttf等格式。

3. 引用字体文件：将下载的字体文件放置到项目的某个目录下，并在CSS文件中引用这些字体文件。

可以使用@font-face规则来定义字体的名称和路径。

例如，使用Font Awesome图标字体库，可以在CSS文件中写入以下代码：@font-face {font-family: 'Font Awesome';src: url('fonts/fontawesome-webfont.woff2') format('woff2'),url('fonts/fontawesome-webfont.woff') format('woff');font-weight: normal;font-style: normal;}4. 使用图标字体：通过在HTML文件中使用相应的CSS类名，即可在页面中使用图标字体。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网页常见图标用自定义字体实现
Font Awesome 官网(fontawesome-webfont的字体)：http://fortawesome.github.io/Font-Awesome/
简介：让你可以即时定制的可伸缩矢量图标；
公有302种图标任你选择；
图标的风格，如：大小、颜色、阴影可以通过css样式修改；
支持ie6、7；
图例：
demo：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<meta name="author" content="@my_coder">
<title></title>

<style type="text/css">
/*
方法二：自定义样式
优点：样式文件较小，只写自己需要的样式
缺点：需要查找每个样式对应的值，比较繁琐*/
@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('font/fontawesome-webfont.woff') format('woff'),
url('font/fontawesome-webfont.ttf') format('truetype'),
url('font/fontawesome-webfont.svgz#FontAwesomeRegula r') format('svg'),
url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-home:before{
content: "\f015"; /*'\f015'代表‘家’的图标，每个图标有对应的值*/
}
.icon-home { /*兼容ie6、7*/
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '?');
}
li{font-family:
'FontAwesome';font-size:30px;display:block;color:#aaa;lin e-height:40px;}
li:hover{color:#f60;}
</style>
</head>
<body>
<ul>
<li>
 首页
</li>
<li>
 微笑
</li>
<li>
 语音
</li>
<li>
 返回
</li>
<li>
 相机
</li>
<li>
 地球
</li>
</ul>
</body>
</html> 完整实例下载：
/share/link?shareid=538458&uk= 688556984。

seo工具大全(绝对干货)

页数:6
前端架构体系技术

页数:29
家具厂管理软件界面设计与实现

页数:26
ionic自定义字体图标

页数:11
120款高效率推广运营策划常用工具(最新版)(1)(2)

页数:7
React-Native文章react-native-scrollable-tab-view(进阶篇)

页数:8
ionic2.0教程

页数:5
如何定制Lotus iNotes

页数:35
前端模拟面试常问问题汇总 - 答案

页数:14
化学化工学院本科生毕业论文撰写规范(最终版)

页数:10