identifying an i element in css properties-CodePudding

I want to change the position of an i element which is an icon. I have tried including it's class and changing the position but it didn't seem to work, I then included it in a span element and it still doesn't seem to identify the element neither in positioning or other properties.

the element structure:

.map {
  object-position: top;
  size: 10px;
}

.fa-map-marker {
  object-position: top;
  size: 10px;
}

<!-- Fontawesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">


<!-- Body -->
<span  onclick="location.href='#';" style="cursor: pointer;">
  <i  style="font-size:48px;color:red"></i>
</span>

CodePudding user response：

.fa-map-marker {
 position: absolute;
 left:20px;
 /*right: 10px;*/

}

Try this For Changing the of icon And also if you want to move it on right jus the right property and remove the left one.

CodePudding user response：

Dimensions

size does not exist

Use height and width

Normally a block-level (display: block) element like a <div> should be used as a container -- a <span> (display: inline) is formless, giving an element "size" (height and width) would work on blocks not inline. Any element can be a block by assigning display:block if you have your heart set on using a <span>.

Position

top does not work on static elements

Assign position: relative, absolute, fixed, or sticky in order to position elements left, right, top, and bottom.

Font Icons

Font-Awesome is a collection of font characters and SVG. Just like the text you see before you, the icons are just another character. Here are some CSS properties that are used on fonts:

font-size
font-weight
color

You should read:

html {
  font: 300 2vmax Consolas;
}

body {
  overflow: hidden;
}

.map {
  display: block;
  position: relative;
  width: 90vw;
  min-height: 93vh;
  border: 1px solid black;
  background: url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL21hcHMuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo4Mjh9LCJ0b0Zvcm1hdCI6ImF2aWYifX0=) no-repeat center;
  background-size: contain;
}

.fa {
  display: inline-block;
  position: absolute;
  font-size: 1.75rem;
}

#a {
  top: 35vh;
  left: 28.75vw;
  color: red;
}

#b {
  top: 21vh;
  right: 28.75vw;
  color: lime;
}

#c {
  top: 61vh;
  left: 50vw;
  color: blue;
}

.fa-fighter-jet {
  top: 68vh;
  right: 56vw;
  color: black;
  transform: rotate(-45deg);
}

.fa-plane {
  top: 37vh;
  left: 23vw;
  color: magenta;
  transform: rotate(205deg);
}

<!-- Fontawesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

<a  href='#'>
  <i id='a' ></i>
  <i id='b' ></i>
  <i ></i>
  <i id='c' ></i>
  <i ></i>
</a>