Кос*_*іяк 2 html css icons web
我遇到问题，无法在文本前面插入图标\n应该是这样：在此处输入图像描述\n（我在代码片段上添加代码）我是初学者编码器，因此可能会出现错误我只想在徽标前面添加一个交易篮图标，并使用与徽标本身颜色相同的文本，我在互联网和其他论坛上搜索了很长时间，但那里的所有内容都没有帮助我或不工作
\n
body {\n margin: 0;\n font-family: Helvetica, sans-serif;\n background-color: #f4f4f4;\n }\n \n a {\n color: #000;\n }\n \n /* header */\n \n .header {\n background-color: #fff;\n box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);\n position: fixed;\n width: 100%;\n z-index: 3;\n }\n \n .header ul {\n margin: 0;\n padding: 0;\n list-style: none;\n overflow: hidden;\n background-color: #fff;\n }\n \n .header li a {\n display: block;\n padding: 20px 20px;\n border-right: 1px solid #f4f4f4;\n text-decoration: none;\n }\n \n .header li a:hover,\n .header .menu-btn:hover {\n color:green;\n }\n\n /* Big coder moment, \xd0\xb4\xd0\xb0 \xd1\x8f \xd0\xb3\xd0\xb5\xd0\xbd\xd0\xb8\xd0\xb9 \xd0\xbf\xd1\x80\xd0\xbe\xd1\x81\xd1\x82\xd0\xbe \xd0\xb7\xd0\xb5\xd0\xbb\xd0\xb5\xd0\xbd\xd0\xb8\xd0\xbc \xd0\xb7\xd0\xb0\xd0\xbb\xd0\xb8\xd0\xb2 \xd0\xb1\xd0\xb5\xd0\xb7 \xd1\x85\xd0\xb5\xd0\xba\xd1\x81\xd0\xb0 */\n \n .header .logo {\n display: block;\n float: left;\n font-size: 2em;\n padding: 10px 20px;\n text-decoration: none;\n color:green;\n \n }\n \n /* menu */\n \n .header .menu {\n clear: both;\n max-height: 0;\n transition: max-height .2s ease-out;\n }\n \n /* menu icon */\n \n .header .menu-icon {\n cursor: pointer;\n display: inline-block;\n float: right;\n padding: 28px 20px;\n position: relative;\n user-select: none;\n }\n \n .header .menu-icon .navicon {\n background: #333;\n display: block;\n height: 2px;\n position: relative;\n transition: background .2s ease-out;\n width: 18px;\n }\n \n .header .menu-icon .navicon:before,\n .header .menu-icon .navicon:after {\n background: #333;\n content: \'\';\n display: block;\n height: 100%;\n position: absolute;\n transition: all .2s ease-out;\n width: 100%;\n }\n \n .header .menu-icon .navicon:before {\n top: 5px;\n }\n \n .header .menu-icon .navicon:after {\n top: -5px;\n }\n \n /* menu btn */\n \n .header .menu-btn {\n display: none;\n }\n \n .header .menu-btn:checked ~ .menu {\n max-height: 240px;\n }\n \n .header .menu-btn:checked ~ .menu-icon .navicon {\n background: transparent;\n }\n \n .header .menu-btn:checked ~ .menu-icon .navicon:before {\n transform: rotate(-45deg);\n }\n \n .header .menu-btn:checked ~ .menu-icon .navicon:after {\n transform: rotate(45deg);\n }\n \n .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,\n .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {\n top: 0;\n }\n \n /* 48em = 768px */\n \n @media (min-width: 48em) {\n .header li {\n float: left;\n }\n .header li a {\n padding: 20px 30px;\n }\n .header .menu {\n clear: none;\n float: center;\n max-height: none;\n }\n .header .menu-icon {\n display: none;\n }\n }\n \n logo:before {\n content:url(images/quotemarks.png);\n }\n \n \n <!DOCTYPE html>\n<html lang="en">\n<head>\n <header class="header">\n <a href="" class="logo">Fresh market</a>\n <input class="menu-btn" type="checkbox" id="menu-btn" />\n <link rel="stylesheet" href="style.css">\n <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>\n <ul class="menu">\n <li><a href="#work">Home</a></li>\n <li><a href="#about">Shop</a></li>\n <li><a href="#careers">About</a></li>\n <li><a href="#contact">Contact</a></li>\n </ul>\n</header>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Shop</title>\n</head>\n<body>\n \n</body>\n</html>有些错误:(
\n
p{
color:green;
font-size:25px;
font-weight: bold;
}
p:before {
font-family: "Font Awesome 5 Free";
content:url(' add image link');
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}<p class="icon">Fresh Market</p>很简单，您可以像这样使用 .css :before 和 :after 元素
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
<style>
body {
font-family: Arial;
font-size: 15px;
}
a {
text-decoration: none;
color: #000000;
}
a:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
</style>
</head>
<body>
<a href="#">Here is a link</a>
</body>
</html>