在引入iconfont图标的时候,图标一直显示小方框,就是不显示对应的小图标,原因是全局引入的css样式没有生效。仍然是之前的styled-components的createGlobalStyle的问题。
iconfont.js中的内容:
import { createGlobalStyle } from 'styled-components';
export const GlobalIcon = createGlobalStyle`
@font-face {
font-family: "iconfont";
src: url('./iconfont.eot?t=1563776969625'); /* IE9 */
src: url('./iconfont.eot?t=1563776969625#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAUQAAsAAAAACYwAAATCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqGUIU+ATYCJAMQCwoABCAFhG0HQBsoCFGUTU6X7KcmTwKUpRlmwkARAjjGglQAQIECAKBAIB7+Xfu8L8n8zRIqUEwlUlVflRWBEWurWukIjkdhWFfP1pqlxMJmfFlWESr0B9ntHmBK4+t0jUYh+8L98O+ZL61fD0pzlNocwEzqbW43BwdgMIoR3/pj5q7//8/l9O6q54HNb1mOa03r+VEvwGhsDWyMaWNbwAWCGd0wdnEZmwn0mVWXuJS43kFeofUKxNNGqUE+plVKqKEqOjkTi3ihUdOz9MFz9/fxz05UkibTBnbvT0zo/9T+eZCPWhm4ZSN4/ZnBTCNjDSjEw1zrbSk/uialT2qedgBUVaKvuvWfB+2IvxZp1W2k1n9edGjSAUjZk+Qd45lsEj/XuXmyA8g/AWmxJ1SMgZgA0QWafNp9XZEM1HozVIRq6ekZCXR0TAxZiI2ZLpRq5cNmUWERbQn7jQsqz4kUAMCAl6H8IdKF413gBOGS49NANiNSXEOQdXUatVStzFcqJSoVXjtzYw7rG6yLvV+q1uAajUSlbNWRL5oiY5ok7RsqGyCbrzv+2BzIKFSXYTBk8GkghHIaQZgpykHEYBgzgQKSlIoQMm81saOcFiNdjIICQEYa4XJI0ww8ADkCZDyUT/aKxV1Y3zknkQKdmEEBII1097hUhvaDKAZhCE2LodyIBJKQSiA4AvPrwzQanOkxyidRi555+3jSqKf7tGMinSCaeqUy38iLmUITKIYR01jfnFMS0ye2pPuwy3VJT5zjn9Tq/K+6qG6KzJKwYqsaIzWc35HLlt8I9kK4MZ7tLtJG7VJRWnTo5zJ8+T0T9Lepw3cHSxD6GLcyDy3VfZyWWSL92VSUFJdzfuHF2RlqWBplbOhPX4/KJSn/+JhFXkxERDRnMTYhPnaJGx0efvASGE7Qw94LrpklZ1bKvBPSBHdN3r+q6yjWugbnZXod88K7Qiy76qqgR1AF8XcxxOUJ21U4rOL3nLId9hvVIrRGhYKdPA6/R7eHzxZ0V1wBKVWutezW4YkHcCMindA/+8OUy2V5O3QQHO8YZRRfYLI6oNp1whPRx6MJbcpXn8U6dXilDhXHOs8G55EyDz4cDFZ022eP35jeYzJ8tLBoVYPrhca7Y5ofEbb/2a45sjO3VLJ1njAf70/a73S57/SHtRU3SzAWy+6szbeRYdML4Slr5YAAoD1fzmjLH/JlGsf22N1frJPjXz6XlddO/a/91zjnx83VT9fd4kA9GfwnvNq8H4pXM63IAk1Xiig0uYq9ePu+eiT06cNvlGTMXx/2SRCaQ2V5EJIeM5BVc2ihrEGj3x50VGehz6rZ9H7jIilRerHiDiCMeEAy5CVkI75oofygMeUfOkYiQ58rMb5gv4V4BC8SpDGZqK9BVe17wjBw0UvdkDw5WhQVuLQDRbEKYMfTO5mYkUdRH0PilbLLywUKwndxCrYjx/ExIHyLDG4el3PQa3nV5V2pabS7UHRRhGgYMSHdDVIMPo+ws7Ni6vsbRDpxaKISXInzgERiqnHU0dSugc6kXi3cuTSPnUldjAncTYj4XGgKzcTRoz4U5LezEANrOrYIB3paKJOoK22OL3evcAn00RYskSJHiUY6X1m8X+lJU7OUbUrfbqQaAAAA') format('woff2'),
url('./iconfont.woff?t=1563776969625') format('woff'),
url('./iconfont.ttf?t=1563776969625') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont.svg?t=1563776969625#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}`;
然后在 App.js 文件中引入iconfont.js 并将 GlobalIcon 作为组件引入:
class App extends Component {
render() {
return (
<div>
<Header/>
<GlobalIcon />
</div>
);
}
}
最后在需要使用iconfont的地方直接使用就好:
<i className="iconfont"></i>