凡客网站建设,app拉新推广赚佣金,蚌埠网站制作,网站出现转站怎么办很久之前就学习过iconfont图标的使用#xff0c;今天又遇到一个用icomoon字体图标写的案例#xff0c;于是详细学习了一下#xff0c;现整理如下。
一、下载
1.网址#xff1a; https://icomoon.io/#home 2.点击IcoMoon App。 3.点击 https://icomoon.io/app 4.进入IcoM…很久之前就学习过iconfont图标的使用今天又遇到一个用icomoon字体图标写的案例于是详细学习了一下现整理如下。
一、下载
1.网址 https://icomoon.io/#home 2.点击IcoMoon App。 3.点击 https://icomoon.io/app 4.进入IcoMoon - Free界面点击选择需要的图标可以选择多个。
5.点击页面右下方“Generate Font”生成字体。
6.点击页面右下方“Download”下载。7.下载完成以后会生成一个icomoon.zip压缩包解压缩即可。
二、在网页中使用字体图标。
1.网页字体图标效果如下。 2.目录结构如下。 3.icomoon.css文件代码如下
/*下面代码是下载的示例css中生成的因为路径有所改动css文件放入css文件夹中所以url中的路径由./改为../*/
font-face {font-family: icomoon;src: url(../fonts/icomoon.eot?7qyemc);src: url(../fonts/icomoon.eot?7qyemc#iefix) format(embedded-opentype),url(../fonts/icomoon.ttf?7qyemc) format(truetype),url(../fonts/icomoon.woff?7qyemc) format(woff),url(../fonts/icomoon.svg?7qyemc#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;
}[class^icon-], [class* icon-] {/* 使用!important 防止浏览器扩展改变字体的问题*/font-family: icomoon !important;speak: never;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* 字体渲染效果更好*/-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
span {font-size:32px; /*1.改变字体图标的大小*/color:#339f63; /*2.改变字体图标的颜色*/margin-bottom: 10px;
}
.icon-connection:before {content: \e91b;
}
.icon-bubbles:before {content: \e96c;
}
.icon-link:before {content: \e9cb;
}
.icon-play2:before {content: \ea15;
}
.icon-arrow-up2:before {content: \ea3a;
}
.icon-circle-up:before {content: \ea41;
}
.icon-circle-right:before {content: \ea42;
}
.icon-circle-left:before {content: \ea44;
}
.icon-rss2:before {content: \ea9c;
}
.icon-android:before {content: \eac0;
}
4.icomoon_demo.html文件使用span标记加对应的类名就可以。
!doctype html
htmlheadmeta charsetutf-8titleIcoMoon Demo/titlemeta namedescription contentAn Icon Font Generated By IcoMoon.iometa nameviewport contentwidthdevice-width, initial-scale1link relstylesheet href./css/icomoon.css/headbodyspan classicon-connection/spanspan classicon-bubbles/spanspan classicon-link/spanspan classicon-play2/spanspan classicon-arrow-up2/spanspan classicon-circle-up/spanspan classicon-circle-left/spanspan classicon-circle-right/spanspan classicon-android/spanspan classicon-rss2/span/body
/html5.注意选择的图标不同fonts文件夹中每次生成的.eot,.svg等文件会不同,如果要用到新的图标需要重新到官网选择需要的图标重新生成重新下载。
三、使用场景举例
很多网站的导航栏都有一个倒三角表示此处有下拉菜单如图所示是淘宝网的“联系客服”菜单项。 1.文件目录结构如下。
2.本例中没有使用单独的 css文件css代码放在html文件中url的路径和上例中不同。另外本例中还使用了::after伪元素具体代码如下。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle伪元素选择器-字体图标倒三角/titlestyle* {margin: 0;padding: 0;}body {background-color: #eee;}ul,li {list-style: none;}a{text-decoration: none;color:#333;}font-face {font-family: icomoon;src: url(fonts/icomoon.eot?1lv3na);src: url(fonts/icomoon.eot?1lv3na#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?1lv3na) format(truetype),url(fonts/icomoon.woff?1lv3na) format(woff),url(fonts/icomoon.svg?1lv3na#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;}#service {position: relative; /*父相*/width: 105px;height: 35px;line-height: 35px;margin: 20px 100px;box-sizing: border-box;padding-left: 10px;}#service::after {position: absolute; /*绝对定位*/top: 0px; /*定义字体图标的位置-水平方向*/right: 10px; /*定义字体图标的位置-垂直方向*/font-family: icomoon; /*使用icomoon字体*/content: \e91e; /*字体图标编号*/color: #ccc; /*字体图标颜色*/font-size: 20px; /*字体图标大小*/}#service ul {position: absolute; /*子绝*/left: 0;top: 35px;visibility: hidden;}#service li{padding: 0 10px;}#service:hover {background-color: #fff;}#service:hover ul {visibility: visible;background-color: #fff;}#service li:hover{background-color: #ccc;}/style/headbodydiv idservice联系客服ullia href#消费者客服/a/lilia href#卖家客服/a/li lia href#意见反馈/a/li lia href#网页版旺旺/a/li/ul/div/body
/html
