首页 > Web堆儿 > 正文

网页前端制作中字体图标的使用小技巧

时间:2017-05-11 20:26:00  转载请注明出处:盛世阳光网站建设 本文地址:http://www.gonet.com.cn/webduirshow-99.html

网页前端制作中字体图标的使用小技巧

制作网页的过程中,经常会使用到字体图标。那么如何使用字体图标呢?今天就由盛世阳光的老徐和你分享一下网页设计制作过程中的图片字体使用小技巧。

第一步,我们需要找到自己所需的字体图标。
图标字体库

从图库中找到我们所需要的,选中,黄色边框的即为选中的,下方会显示我们选中了几个字体图标。

下载图标字体库

点击此处进入到下载页面,下载旁的设置按钮可以修改字体名称,

新建图标字体库
这是我修改后的字体名称。修改后点击右上角关闭按钮关闭即可。下载完成后,会压缩成压缩文件。

解压后将fonts文件夹整个放入你的项目的根目录下,方便使用。
接下来就是定义字体了,在css中引入,
引入图标字体库CSS

然后定义,所有带有icon- 的类都要进行字体的定义。

修改图标字体库CSS

字体是我们自己定义的字体名称。
此时在页面中写出我们需要写入字体图标的位置,



在css中写入他所需要的字体的值,


效果就可以出现了。

手机图标字体

我们可以像更改字体一样更改他的样式,



字体就会改变,

红色手机图标字体

这就是字体图标的使用方法。

今天关于网页制作图标字体使用技巧就和大家分享这里,谢谢!


  盛世阳光秉承着专业、贴心的服务理念,用心、用智、用情对待每一位新老客户。无论是在网站、app还是游戏领域,你都能看到我们的身影,旨为为企业互联网+新模式带来更多灵感与机遇。开创行业发展趋势,引领行业创新潮流,为企业改造升级出谋划策,我们的努力会让你明白“适合的,才是最好的”。互联网的盛世,岂能没有阳光同行?




   盛世阳光手机版网站    盛世阳光微信公众平台

北京:北京市朝阳区金蝉西路甲一号酷车小镇D1-1栋  010-51296822

上海:上海市洛川中路1158号B2幢609  021-64201096

京ICP备05015483号

版权所有 2001-2016 北京市盛世阳光文化传播有限责任公司