15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页制作中字体图标的使用方法

网页制作中字体图标的使用方法

时间:2023-07-05 15:24:01 | 来源:网站运营

时间:2023-07-05 15:24:01 来源:网站运营

网页制作中字体图标的使用方法:方法一:

1.登录https://icomoon.io/ 进入

2.选中需要的图标,点击右下角

3.进入点击download,进行下载

4.下载好后解压,只要fonts里面四个小文件,把他们放到存放的fonts文件夹里

5.打开上边的style.css(用开发工具打开),复制里面的代码




6.修改上面的路径,在几个url上加上 ../ (返回上一级目录,寻找的那四个文件)

具体代码如下,复制它到css样式里面

@font-face { /* 字体图标,要修改路径 */ font-family: 'icomoon'; src: url('../fonts/icomoon.eot?sx6ghy'); src: url('../fonts/icomoon.eot?sx6ghy#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?sx6ghy') format('truetype'), url('../fonts/icomoon.woff?sx6ghy') format('woff'), url('../fonts/icomoon.svg?sx6ghy#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }


7.打开de mo的文件夹,进入复制小方框(需要那个复制那个)粘贴到标签里

8.在css样式里引入字体图标




9.也可以在里面修改字体图标的颜色,大小

font-weight: normal;是否加粗 ;font-style: normal;是否倾斜 ; color: #f10215;颜色 ;font-size: 16px;大小 ;


方法二:

(font class字体的用法)

1.进入阿里妈妈

2.挑选需要的字体图标选入项目,进行下载

3.解压后将这五个文件复制到fonts的文件夹下




4.在html页面引入iconfont.css

<link rel="stylesheet" href="./iconfont.css"> 将路径修改一下,指向iconfont.css

5.在需要使用字体图标的地方插入

<span class="iconfont icon-xxx"></span>

icon-xxx要改成图标想对应的代码

可以在下载的demo里找,也可以在我的项目里找



关键词:使用,方法,字体

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭