• 不断学习才有回报,学无止境!

网页图标字体的使用方法

SEO/SEM/网建 箭翎 1304次浏览 0个评论 扫描二维码

图标字体是目前一种比较流行的网页设计方式,相比于传统的图片格式有以下几个优势!
1. 你可以自由调整图标的尺寸而不用担心像素(产生锯齿)的问题2. 这类字体大部分都是开源的,所以图标种类丰富多样3. 任意修改图标颜色
4. 加载迅速,兼容性好,包括ie6浏览器
5. 调用非常方便
所以,作为网页前端开发者们视乎已经没有什么理由忽略它了,下面打算介绍一种调用网页图标字体的方法供大家使用。
要想使用这些图标,首先得找一个提供这类资源的网站,目前已经有很多网站专门提供这类资源,当然,如果你愿意花时间也可以自己设计。
weloveiconfonts是一个专门提供这类资源的网站,登陆后你就可以在种类繁多的图标字体中选择一组自己喜欢的了。

entypo

以entypo这组图标为例,点击add按钮后下方的use选项会变成高亮,继续点击就会出现使用方法。在css文件中粘贴一下代码

@import url(http://weloveiconfonts.com/api/?family=entypo);/* entypo */
[class*=”entypo-“]:before {
font-family: ‘entypo’, sans-serif;
}

调用方法:
比如你要调用某一个图标如(email),直接点击该图标,在下方就会出现调用方式 entypo-mail,接下来在你的html结构中直接调用class类就行了。

entypo2

<span class=”entypo-mail”></span>


entypo3

如果你不想在css中插入该网站url http://weloveiconfonts.com/api/?family=entypo或者担心哪天网络被墙了,你还可以直接输入该网址下载该组图标字体。
输入网址后就将全部代码复制下来,新建一个css文件粘贴代码保存到css文件夹中用于调用。
以下仅复制了一部分不是全部

@charset “UTF-8”;
@font-face {
font-family: ‘entypo’;
font-style: normal;
font-weight: normal;
src: url(‘http://weloveiconfonts.com/api/fonts/entypo/entypo.eot&#8217;);
src: url(‘http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix&#8217;) format(‘eot’),
url(‘http://weloveiconfonts.com/api/fonts/entypo/entypo.woff&#8217;) format(‘woff’),
url(‘http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf&#8217;) format(‘truetype’),
url(‘http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo&#8217;) format(‘svg’);
}

然后再将entypo.eot、entypo.woff、entypo.ttf、entypo.svg这四种字体格式分别下载下来放到fonts文件夹中,字体下载在url中写得很清楚啦!
将css文件中的网址替换为本地的url路径即可

@charset “UTF-8”;
@font-face {
font-family: ‘entypo’;
font-style: normal;
font-weight: normal;
src: url(‘../fonts/entypo/entypo.eot’);
src: url(‘../fonts/entypo/entypo.eot?#iefix’) format(‘eot’),
url(‘../fonts/entypo/entypo.woff’) format(‘woff’),
url(‘../fonts/entypo/entypo.ttf’) format(‘truetype’),
url(‘../fonts/entypo/entypo.svg#entypo’) format(‘svg’);
}

网页图标字体确实是一种非常方便的资源,主要还是可以任意修改图标颜色,大小还不用担心变形,如果想要的图标都有的话甚至CSS Sprites已经不再需要了,节省了很多开发时间。(转自网络)


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明网页图标字体的使用方法
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址