Position icons on same line as text - html

Question

I want to make icons to be on the left side and the text right next to them.
In my code, the icons are above the text.
How can I make them organized and near the text without everything to get messy?
/* Universal reset: */
* {
margin: 0;
padding: 0;
}
/* Body CSS (Background image, font) */
body {
font-size: 0.825em;
background-image: url(img/Background_Image.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: Arial, Helvetica, sans-serif;
}
/* Chef Logo */
.img-logo {
position: relative;
top: 37px;
float: left;
width: 100px;
height: 100px;
background: #fcfcfc00;
right: 25px;
}
/* The clearfix hack to clear the floats: */
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
article {
background-color: #ffffffe0;
margin: 3em 0;
padding: 20px;
border: 1px solid #00000094;
/* black Transerent #a29b94a3 */
}
/* All Footer Styling: */
footer {
margin-bottom: 30px;
text-align: center;
font-size: 0.825em;
}
/* "Article" Footer Styling: */
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #ffffffe0;
/* #efebe785 */
color: #000000;
/* Align all the text left so it lines up */
text-align: left;
border: 1px solid #00000094;
}
/* "Article" Footer "table": */
.left,
.right,
.center {
float: left;
width: 33.333%;
position: relative;
box-sizing: border-box;
padding-right: 15px;
padding-left: 15px;
}
/* Text on footer: */
footer p {
margin-bottom: -2.5em;
position: relative;
}
/* Text on footer: */
footer a {
color: #000000;
background-color: #ffffffe0;
display: block;
padding: 2px 4px;
z-index: 100;
position: relative;
border: 1px solid #00000094;
text-decoration: none;
outline: none;
}
footer a:hover {
text-decoration: none;
background-color: #000000e0;
color: white;
}
footer a.class1 {
color: #000000;
background-color: #efebe700;
display: block;
padding: 1px 1px;
z-index: 100;
position: relative;
border: none;
}
footer a.by {
float: left;
position: relative;
top: 11px
}
footer a.up {
float: right;
top: 11px
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
/* W3.CSS 4.08 January 2018 by Jan Egil and Borge Refsnes */
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block
}
progress {
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active,
a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
svg:not(:root) {
overflow: hidden
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
button,
input,
select,
textarea {
font: inherit;
margin: 0
}
optgroup {
font-weight: bold
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
/* End extract */
.w3-image {
max-width: 100%;
height: auto
}
img {
vertical-align: middle
}
a {
color: inherit
}
.w3-table,
.w3-table-all {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table
}
.w3-table-all {
border: 1px solid #ccc
}
.w3-bordered tr,
.w3-table-all tr {
border-bottom: 1px solid #ddd
}
.w3-striped tbody tr:nth-child(even) {
background-color: #f1f1f1
}
.w3-table-all tr:nth-child(odd) {
background-color: #fff
}
.w3-table-all tr:nth-child(even) {
background-color: #f1f1f1
}
.w3-hoverable tbody tr:hover,
.w3-ul.w3-hoverable li:hover {
background-color: #ccc
}
.w3-centered tr th,
.w3-centered tr td {
text-align: center
}
.w3-table td,
.w3-table th,
.w3-table-all td,
.w3-table-all th {
padding: 8px 8px;
display: table-cell;
text-align: left;
vertical-align: top
}
.w3-table th:first-child,
.w3-table td:first-child,
.w3-table-all th:first-child,
.w3-table-all td:first-child {
padding-left: 16px
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.w3-btn:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.w3-disabled *,
:disabled * {
pointer-events: none
}
.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
box-shadow: none
}
.w3-badge,
.w3-tag {
background-color: #000;
color: #fff;
display: inline-block;
padding-left: 8px;
padding-right: 8px;
text-align: center
}
.w3-badge {
border-radius: 50%;
cursor: pointer;
height: 15px;
width: 15px;
padding: 0
}
.w3-ul {
list-style-type: none;
padding: 0;
margin: 0
}
.w3-ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd
}
.w3-ul li:last-child {
border-bottom: none
}
.w3-tooltip,
.w3-display-container {
position: relative
}
.w3-tooltip .w3-text {
display: none
}
.w3-tooltip:hover .w3-text {
display: inline-block
}
.w3-ripple:active {
opacity: 0.5
}
.w3-ripple {
transition: opacity 0s
}
.w3-input {
padding: 8px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 100%
}
.w3-select {
padding: 9px 0;
width: 100%;
border: none;
border-bottom: 1px solid #ccc
}
.w3-dropdown-click,
.w3-dropdown-hover {
position: relative;
display: inline-block;
cursor: pointer
}
.w3-dropdown-hover:hover .w3-dropdown-content {
display: block
}
.w3-dropdown-hover:first-child,
.w3-dropdown-click:hover {
background-color: #ccc;
color: #000
}
.w3-dropdown-hover:hover>.w3-button:first-child,
.w3-dropdown-click:hover>.w3-button:first-child {
background-color: #ccc;
color: #000
}
.w3-dropdown-content {
cursor: auto;
color: #000;
background-color: #fff;
display: none;
position: absolute;
min-width: 160px;
margin: 0;
padding: 0;
z-index: 1
}
.w3-check,
.w3-radio {
width: 24px;
height: 24px;
position: relative;
top: 6px
}
.w3-sidebar {
height: 100%;
width: 200px;
background-color: #fff;
position: fixed;
z-index: 1;
overflow: auto
}
.w3-bar-block .w3-dropdown-hover,
.w3-bar-block .w3-dropdown-click {
width: 100%
}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
.w3-bar-block .w3-dropdown-click .w3-dropdown-content {
min-width: 100%
}
.w3-bar-block .w3-dropdown-hover .w3-button,
.w3-bar-block .w3-dropdown-click .w3-button {
width: 100%;
text-align: left;
padding: 8px 16px
}
.w3-main,
#main {
transition: margin-left .4s
}
.w3-modal {
z-index: 3;
display: none;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4)
}
.w3-modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
width: 600px
}
.w3-bar {
width: 100%;
overflow: hidden
}
.w3-center .w3-bar {
display: inline-block;
width: auto
}
.w3-bar .w3-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
outline: none;
display: block
}
.w3-bar .w3-dropdown-hover,
.w3-bar .w3-dropdown-click {
position: static;
float: left
}
.w3-bar .w3-button {
white-space: normal
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
outline: none;
white-space: normal;
float: none
}
.w3-bar-block.w3-center .w3-bar-item {
text-align: center
}
.w3-block {
display: block;
width: 100%
}
.w3-responsive {
display: block;
overflow-x: auto
}
.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
content: "";
display: table;
clear: both
}
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
float: left;
width: 100%
}
.w3-col.s1 {
width: 8.33333%
}
.w3-col.s2 {
width: 16.66666%
}
.w3-col.s3 {
width: 24.99999%
}
.w3-col.s4 {
width: 33.33333%
}
.w3-col.s5 {
width: 41.66666%
}
.w3-col.s6 {
width: 49.99999%
}
.w3-col.s7 {
width: 58.33333%
}
.w3-col.s8 {
width: 66.66666%
}
.w3-col.s9 {
width: 74.99999%
}
.w3-col.s10 {
width: 83.33333%
}
.w3-col.s11 {
width: 91.66666%
}
.w3-col.s12 {
width: 99.99999%
}
#media (min-width:601px) {
.w3-col.m1 {
width: 8.33333%
}
.w3-col.m2 {
width: 16.66666%
}
.w3-col.m3,
.w3-quarter {
width: 24.99999%
}
.w3-col.m4,
.w3-third {
width: 33.33333%
}
.w3-col.m5 {
width: 41.66666%
}
.w3-col.m6,
.w3-half {
width: 49.99999%
}
.w3-col.m7 {
width: 58.33333%
}
.w3-col.m8,
.w3-twothird {
width: 66.66666%
}
.w3-col.m9,
.w3-threequarter {
width: 74.99999%
}
.w3-col.m10 {
width: 83.33333%
}
.w3-col.m11 {
width: 91.66666%
}
.w3-col.m12 {
width: 99.99999%
}
}
#media (min-width:993px) {
.w3-col.l1 {
width: 8.33333%
}
.w3-col.l2 {
width: 16.66666%
}
.w3-col.l3 {
width: 24.99999%
}
.w3-col.l4 {
width: 33.33333%
}
.w3-col.l5 {
width: 41.66666%
}
.w3-col.l6 {
width: 49.99999%
}
.w3-col.l7 {
width: 58.33333%
}
.w3-col.l8 {
width: 66.66666%
}
.w3-col.l9 {
width: 74.99999%
}
.w3-col.l10 {
width: 83.33333%
}
.w3-col.l11 {
width: 91.66666%
}
.w3-col.l12 {
width: 99.99999%
}
}
.w3-content {
max-width: 980px;
margin: auto
}
.w3-rest {
overflow: hidden
}
.w3-cell-row {
display: table;
width: 100%
}
.w3-cell {
display: table-cell
}
.w3-cell-top {
vertical-align: top
}
.w3-cell-middle {
vertical-align: middle
}
.w3-cell-bottom {
vertical-align: bottom
}
.w3-hide {
display: none
}
.w3-show-block,
.w3-show {
display: block
}
.w3-show-inline-block {
display: inline-block
}
#media (max-width:600px) {
.w3-modal-content {
margin: 0 10px;
width: auto
}
.w3-modal {
padding-top: 30px
}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,
.w3-dropdown-click.w3-mobile .w3-dropdown-content {
position: relative
}
.w3-hide-small {
display: none
}
.w3-mobile {
display: block;
width: 100%
}
.w3-bar-item.w3-mobile,
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-click.w3-mobile {
text-align: center
}
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-hover.w3-mobile .w3-btn,
.w3-dropdown-hover.w3-mobile .w3-button,
.w3-dropdown-click.w3-mobile,
.w3-dropdown-click.w3-mobile .w3-btn,
.w3-dropdown-click.w3-mobile .w3-button {
width: 100%
}
}
#media (max-width:768px) {
.w3-modal-content {
width: 500px
}
.w3-modal {
padding-top: 50px
}
}
#media (min-width:993px) {
.w3-modal-content {
width: 900px
}
.w3-hide-large {
display: none
}
.w3-sidebar.w3-collapse {
display: block
}
}
#media (max-width:992px) and (min-width:601px) {
.w3-hide-medium {
display: none
}
}
#media (max-width:992px) {
.w3-sidebar.w3-collapse {
display: none
}
.w3-main {
margin-left: 0;
margin-right: 0
}
}
.w3-top,
.w3-bottom {
position: fixed;
width: 100%;
z-index: 1
}
.w3-top {
top: 0
}
.w3-bottom {
bottom: 0
}
.w3-overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2
}
.w3-display-topleft {
position: absolute;
left: 0;
top: 0
}
.w3-display-topright {
position: absolute;
right: 0;
top: 0
}
.w3-display-bottomleft {
position: absolute;
left: 0;
bottom: 0
}
.w3-display-bottomright {
position: absolute;
right: 0;
bottom: 0
}
.w3-display-middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.w3-display-left {
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%, -50%);
-ms-transform: translate(-0%, -50%)
}
.w3-display-right {
position: absolute;
top: 50%;
right: 0%;
transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%)
}
.w3-display-topmiddle {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%)
}
.w3-display-bottommiddle {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%)
}
.w3-display-container:hover .w3-display-hover {
display: block
}
.w3-display-container:hover span.w3-display-hover {
display: inline-block
}
.w3-display-hover {
display: none
}
.w3-display-position {
position: absolute
}
.w3-circle {
border-radius: 50%
}
.w3-round-small {
border-radius: 2px
}
.w3-round,
.w3-round-medium {
border-radius: 4px
}
.w3-round-large {
border-radius: 8px
}
.w3-round-xlarge {
border-radius: 16px
}
.w3-round-xxlarge {
border-radius: 32px
}
.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
padding: 0 8px
}
.w3-container,
.w3-panel {
padding: 0.01em 16px
}
.w3-panel {
margin-top: 16px;
margin-bottom: 16px
}
.w3-code,
.w3-codespan {
font-family: Consolas, "courier new";
font-size: 16px
}
.w3-code {
width: auto;
background-color: #fff;
padding: 8px 12px;
border-left: 4px solid #4CAF50;
word-wrap: break-word
}
.w3-codespan {
color: crimson;
background-color: #f1f1f1;
padding-left: 4px;
padding-right: 4px;
font-size: 110%
}
.w3-card,
.w3-card-2 {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.w3-card-4,
.w3-hover-shadow:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
}
.w3-spin {
animation: w3-spin 2s infinite linear
}
#keyframes w3-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
.w3-animate-fading {
animation: fading 10s infinite
}
#keyframes fading {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.w3-animate-opacity {
animation: opac 0.8s
}
#keyframes opac {
from {
opacity: 0
}
to {
opacity: 1
}
}
.w3-animate-top {
position: relative;
animation: animatetop 0.4s
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.w3-animate-left {
position: relative;
animation: animateleft 0.4s
}
#keyframes animateleft {
from {
left: -300px;
opacity: 0
}
to {
left: 0;
opacity: 1
}
}
.w3-animate-right {
position: relative;
animation: animateright 0.4s
}
#keyframes animateright {
from {
right: -300px;
opacity: 0
}
to {
right: 0;
opacity: 1
}
}
.w3-animate-bottom {
position: relative;
animation: animatebottom 0.4s
}
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
.w3-animate-zoom {
animation: animatezoom 0.6s
}
#keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.w3-animate-input {
transition: width 0.4s ease-in-out
}
.w3-animate-input:focus {
width: 100%
}
.w3-opacity,
.w3-hover-opacity:hover {
opacity: 0.60
}
.w3-opacity-off,
.w3-hover-opacity-off:hover {
opacity: 1
}
.w3-opacity-max {
opacity: 0.25
}
.w3-opacity-min {
opacity: 0.75
}
.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
filter: grayscale(100%)
}
.w3-greyscale,
.w3-grayscale {
filter: grayscale(75%)
}
.w3-greyscale-min,
.w3-grayscale-min {
filter: grayscale(50%)
}
.w3-sepia {
filter: sepia(75%)
}
.w3-sepia-max,
.w3-hover-sepia:hover {
filter: sepia(100%)
}
.w3-sepia-min {
filter: sepia(50%)
}
.w3-tiny {
font-size: 10px
}
.w3-small {
font-size: 12px
}
.w3-medium {
font-size: 15px
}
.w3-large {
font-size: 25px;
font-weight: bold
}
.w3-xlarge {
font-size: 24px
}
.w3-xxlarge {
font-size: 36px
}
.w3-xxxlarge {
font-size: 48px
}
.w3-jumbo {
font-size: 64px
}
.w3-left-align {
text-align: left
}
.w3-right-align {
text-align: right
}
.w3-justify {
text-align: justify
}
.w3-center {
text-align: center
}
.w3-border-0 {
border: 0!
}
.w3-border {
border: 1px solid #ffffff
}
/* #ccc transparent color */
.w3-border-top {
border-top: 1px solid #ccc
}
.w3-border-bottom {
border-bottom: 1px solid #ccc
}
.w3-border-left {
border-left: 1px solid #ccc
}
.w3-border-right {
border-right: 1px solid #ccc
}
.w3-topbar {
border-top: 6px solid #ccc
}
.w3-bottombar {
border-bottom: 6px solid #ccc
}
.w3-leftbar {
border-left: 6px solid #ccc
}
.w3-rightbar {
border-right: 6px solid #ccc
}
.w3-section,
.w3-code {
margin-top: 50px;
margin-bottom: 50px
}
.w3-margin {
margin: 16px
}
.w3-margin-top {
margin-top: 16px
}
.w3-margin-bottom {
margin-bottom: 16px
}
.w3-margin-left {
margin-left: 16px
}
.w3-margin-right {
margin-right: 16px
}
.w3-padding-small {
padding: 4px 8px
}
.w3-padding {
padding: 8px 16px
}
.w3-padding-large {
padding: 12px 24px
}
.w3-padding-16 {
padding-top: 16px;
padding-bottom: 16px
}
.w3-padding-24 {
padding-top: 24px;
padding-bottom: 24px
}
.w3-padding-32 {
padding-top: 32px;
padding-bottom: 32px
}
.w3-padding-48 {
padding-top: 48px;
padding-bottom: 48px
}
.w3-padding-64 {
padding-top: 64px;
padding-bottom: 64px
}
.w3-left {
float: left;
cursor: pointer
}
.w3-right {
float: right;
cursor: pointer
}
.w3-button:hover {
color: #000;
background-color: #ffffffe0
}
.w3-transparent,
.w3-hover-none:hover {
color: #fff;
background-color: transparent
}
.w3-hover-none:hover {
box-shadow: none
}
/* Colors */
.w3-amber,
.w3-hover-amber:hover {
color: #000;
background-color: #ffc107
}
.w3-aqua,
.w3-hover-aqua:hover {
color: #000;
background-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<!-- Marking the footer section -->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="footer">
<div class="left">
<p class="left">
<br/>
<i class="fa fa-wechat" style="font-size:15px;"></i>
<font size="5">SOCIAL</font> <br/><br/>
<i class="fa fa-facebook" style="font-size:15px;"></i>
<a href="http://www.facebook.com" class="class1">
<font size="3">Facebook </font> <br/><br/></a>
<i class="fa fa-twitter" style="font-size:15px;"></i>
<a href="http://www.Twitter.com" class="class1">
<font size="3">Twitter </font> <br/><br/></a>
<i class="fa fa-youtube" style="font-size:15px;"></i>
<a href="http://www.Youtube.com" class="class1">
<font size="3">Youtube </font> <br/><br/></a>
</p>
</div>
<div class="center">
<p class="center">
<br/>
<i class="fa fa-headphones" style="font-size:15px;"></i>
<font size="5">SUPPORT</font> <br/><br/>
<i class="fa fa-phone" style="font-size:15px;"></i>
<font size="3">Tellphone</font> <br/><br/>
<i class="fa fa-envelope" style="font-size:15px;"></i>
<font size="3">Email</font>
</p>
</div>
<div class="right">
<p class="right">
<br/>
<i class="fa fa-plus" style="font-size:15px;"></i>
<font size="5">EXTRA</font> <br/><br/>
<i class="fa fa-star" style="font-size:15px;"></i>
<font size="3">Chefs</font> <br/><br/>
<i class="fa fa-info" style="font-size:15px;"></i>
<font size="3">Facts</font>
</p>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Go UP
Copyright 2018 - CookingClub.com
</footer>

Answer 1

Note that the <font> tag is obsolete. I recommend using CSS to style the font, instead.
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
That being said, I made a few immediate changes:
.left, .right, and .center are set to width:33%. Since this is applied to <div> elements and their <p> children, the width of the <p> elements is too narrow (33% of 33%) and the contents wrap to two lines. I just removed the width for now, but it could be applied only to the <div> elements and not the <p> elements.
.footer a and footer a.class1 are set to display:block, which puts those elements on their own lines. I removed them.
Additionally, I recommend not using <br> elements for layout purposes.
See Using <br/> versus <p> and Is it sometimes bad to use <BR />?
* {
margin: 0;
padding: 0;
}
/* Body CSS (Background image, font) */
body {
font-size: 0.825em;
background-image: url(img/Background_Image.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: Arial, Helvetica, sans-serif;
}
/* All Footer Styling: */
footer {
margin-bottom: 30px;
text-align: center;
font-size: 0.825em;
}
/* "Article" Footer Styling: */
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #ffffffe0;
/* #efebe785 */
color: #000000;
/* Align all the text left so it lines up */
text-align: left;
border: 1px solid #00000094;
}
/* "Article" Footer "table": */
.left,
.right,
.center {
float: left;
/*width: 33.333%;*/
position: relative;
box-sizing: border-box;
padding-right: 15px;
padding-left: 15px;
}
/* Text on footer: */
footer p {
margin-bottom: -2.5em;
position: relative;
}
/* Text on footer: */
footer a {
color: #000000;
background-color: #ffffffe0;
/*display: block;*/
padding: 2px 4px;
z-index: 100;
position: relative;
border: 1px solid #00000094;
text-decoration: none;
outline: none;
}
footer a:hover {
text-decoration: none;
background-color: #000000e0;
color: white;
}
footer a.class1 {
color: #000000;
background-color: #efebe700;
/*display: block;*/
padding: 1px 1px;
z-index: 100;
position: relative;
border: none;
}
<!--Script Links -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="footer">
<div class="left">
<p class="left">
<i class="fa fa-wechat" style="font-size:15px;"></i>
<font size="5">SOCIAL</font> <br/><br/>
<i class="fa fa-facebook" style="font-size:15px;"></i>
<a href="http://www.facebook.com" class="class1">
<font size="3">Facebook </font> <br/><br/></a>
<i class="fa fa-twitter" style="font-size:15px;"></i>
<a href="http://www.Twitter.com" class="class1">
<font size="3">Twitter </font> <br/><br/></a>
<i class="fa fa-youtube" style="font-size:15px;"></i>
<a href="http://www.Youtube.com" class="class1">
<font size="3">Youtube </font> <br/><br/></a>
</p>
</div>
<div class="center">
<p class="center">
<i class="fa fa-headphones" style="font-size:15px;"></i>
<font size="5">SUPPORT</font> <br/><br/>
<i class="fa fa-phone" style="font-size:15px;"></i>
<font size="3">Tellphone</font> <br/><br/>
<i class="fa fa-envelope" style="font-size:15px;"></i>
<font size="3">Email</font>
</p>
</div>
<div class="right">
<p class="right">
<i class="fa fa-plus" style="font-size:15px;"></i>
<font size="5">EXTRA</font> <br/><br/>
<i class="fa fa-star" style="font-size:15px;"></i>
<font size="3">Chefs</font> <br/><br/>
<i class="fa fa-info" style="font-size:15px;"></i>
<font size="3">Facts</font>
</p>
</div>
</div>
</footer>
I agree with nootnoot that the structure of the footer elements could be optimized.
Here an example of one method:
* {
margin: 0;
padding: 0;
}
/* Body CSS (Background image, font) */
body {
font-size: 0.825em;
background-image: url(img/Background_Image.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: Arial, Helvetica, sans-serif;
}
footer {
margin-bottom: 30px;
text-align: center;
font-size: 0.825em;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #ffffffe0;
color: #000000;
text-align: left;
border: 1px solid #00000094;
}
/* "Article" Footer "table": */
.column {
width: 33%;
float: left;
box-sizing: border-box;
padding-right: 15px;
padding-left: 15px;
}
.footer_item {
display: block;
margin: 0 0 .25em;
font-size: 1.2em;
color: black;
}
a.footer_item {
color: #555;
text-decoration: none;
}
a.footer_item:hover {
color: black;
}
.footer_item_large {
font-size: 1.8em;
}
.footer_item .fa {
font-size: 15px;
width: 1.5em;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="footer">
<div class="column">
<span class="footer_item footer_item_large">
<i class="fa fa-wechat"></i>SOCIAL
</span>
<a href="http://www.facebook.com" class="footer_item">
<i class="fa fa-facebook"></i>Facebook
</a>
<a href="http://www.Twitter.com" class="footer_item">
<i class="fa fa-twitter"></i>Twitter
</a>
<a href="http://www.Youtube.com" class="footer_item">
<i class="fa fa-youtube"></i>Youtube
</a>
</div>
<div class="column">
<span class="footer_item footer_item_large">
<i class="fa fa-headphones"></i>SUPPORT
</span>
<span class="footer_item">
<i class="fa fa-phone"></i>Telephone
</span>
<span class="footer_item">
<i class="fa fa-envelope"></i>Email
</span>
</div>
<div class="column">
<span class="footer_item footer_item_large">
<i class="fa fa-plus"></i>EXTRA
</span>
<span class="footer_item">
<i class="fa fa-star"></i>Chefs
</span>
<span class="footer_item">
<i class="fa fa-info"></i>Facts
</span>
</div>
</div>
</footer>
I also agree with Liamm12's comment that you could use flexbox for the footer elements.
Example below:
* {
margin: 0;
padding: 0;
}
/* Body CSS (Background image, font) */
body {
font-size: 0.825em;
background-image: url(img/Background_Image.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: Arial, Helvetica, sans-serif;
}
footer {
margin-bottom: 30px;
text-align: center;
font-size: 0.825em;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #ffffffe0;
color: #000000;
text-align: left;
border: 1px solid #00000094;
display:flex;
justify-content:space-between;
padding:5%;
box-sizing:border-box;
}
.footer_item {
display: block;
margin: 0 0 .25em;
font-size: 1.2em;
color: black;
}
.footer_item_large {
font-size: 1.8em;
}
a.footer_item {
color: #555;
text-decoration: none;
}
a.footer_item:hover {
color: black;
}
.footer_item .fa {
font-size: 15px;
width: 1.5em;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="footer">
<div class="column">
<span class="footer_item footer_item_large">
<i class="fa fa-wechat"></i>SOCIAL
</span>
<a href="http://www.facebook.com" class="footer_item">
<i class="fa fa-facebook"></i>Facebook
</a>
<a href="http://www.Twitter.com" class="footer_item">
<i class="fa fa-twitter"></i>Twitter
</a>
<a href="http://www.Youtube.com" class="footer_item">
<i class="fa fa-youtube"></i>Youtube
</a>
</div>
<div class="column">
<span class="footer_item footer_item_large">
<i class="fa fa-headphones"></i>SUPPORT
</span>
<span class="footer_item">
<i class="fa fa-phone"></i>Telephone
</span>
<span class="footer_item">
<i class="fa fa-envelope"></i>Email
</span>
</div>
<div class="column">
<span class="footer_item footer_item_large">
<i class="fa fa-plus"></i>EXTRA
</span>
<span class="footer_item">
<i class="fa fa-star"></i>Chefs
</span>
<span class="footer_item">
<i class="fa fa-info"></i>Facts
</span>
</div>
</div>
</footer>

Answer 2

have you tried putting the icons inside the tags? Like this:
<font size="5"><i class="fa fa-wechat" style="font-size:15px;"></i> SOCIAL</font>
That might help put the icons inline with the text