引入字体图标库
This commit is contained in:
parent
2c6707d618
commit
fe10abce01
|
@ -0,0 +1,71 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "marketing"; /* Project id 2908384 */
|
||||||
|
src: url('iconfont.woff2?t=1661913208504') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1661913208504') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1661913208504') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing {
|
||||||
|
font-family: "marketing" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-list:before {
|
||||||
|
content: "\e626";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-beijingtupian:before {
|
||||||
|
content: "\e833";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-tupian:before {
|
||||||
|
content: "\e889";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-fuwenbenkuang:before {
|
||||||
|
content: "\e66f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-sousuolan-:before {
|
||||||
|
content: "\e606";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-lunbotuguanli:before {
|
||||||
|
content: "\e642";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-sousuo:before {
|
||||||
|
content: "\e62f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-yanjing:before {
|
||||||
|
content: "\e611";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-yanjing-biyan:before {
|
||||||
|
content: "\e63a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-duigoux:before {
|
||||||
|
content: "\ec9e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-changjianwentixiangguanwenti:before {
|
||||||
|
content: "\e689";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-wenti:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-quxiao:before {
|
||||||
|
content: "\e61d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.marketing-jiantou_xiangzuo:before {
|
||||||
|
content: "\eb09";
|
||||||
|
}
|
||||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -4,6 +4,7 @@ import './index.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from './reportWebVitals';
|
||||||
import 'zent/css/index.css';
|
import 'zent/css/index.css';
|
||||||
|
import './icons/iconfont.css'
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
// <React.StrictMode>
|
// <React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
|
|
|
@ -20,9 +20,11 @@ export default class componentLib extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div className='componentLib'>
|
<div className='componentLib'>
|
||||||
<h4>基础组件</h4>
|
<h4>基础组件</h4>
|
||||||
|
<span className='marketing marketing-tupian'></span>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
轮播图
|
<i className='marketing marketing-tupian'/>
|
||||||
|
<span>轮播图</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
背景图
|
背景图
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
|
||||||
.componentLib{
|
.componentLib{
|
||||||
width:180px;
|
width:180px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -21,11 +22,20 @@
|
||||||
height: 72px;
|
height: 72px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: #666;
|
||||||
background: #f99;
|
background: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: all .3s;
|
||||||
|
&:hover{
|
||||||
|
background: #007aff;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
span,i{
|
||||||
|
color: #f00;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue