アイコンの位置調整がしたい

##前提・実現したいこと
こちらの追加質問です。

fontawesomeをやめて自作アイコンを挿入したのですが、位置調整が出来ません。
理想としては、ヘッダーの上下中央揃えで少し右に移動させたいです。

##発生している問題・エラーメッセージ
挿入したアイコンの位置調整をしたいが、左上に固定されたまま動かない

##該当のソースコード

<!DOCTYPE html>
<html>
<head>
<style>
.luxbar-fixed {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
.luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
    display: block;
    height: 2px;
    width: 26px;
    transition: 0.6s ease
}
.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
    background-color: transparent
}
.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before, .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
    margin-top: 0
}
.luxbar-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 58px
}
.luxbar-menu-left .luxbar-navigation, .luxbar-menu-left .luxbar-header {
    justify-content: flex-start
}
.luxbar-menu-right .luxbar-hamburger {
    margin-left: auto
}

.luxbar-menu {
    min-height: 58px;
    transition: 0.6s ease;
    width: 100%
}
.luxbar-navigation {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-left: 0;
    margin: 0
}
.luxbar-menu a, .luxbar-item a {
    text-decoration: none;
    color: inherit;
    cursor: pointer
}
.luxbar-item {
    height: 58px
}
.luxbar-item a {
    padding: 18px 24px 18px 24px;
    display: block
}
.luxbar-hamburger {
    padding: 18px 24px 18px 24px;
    position: relative;
    cursor: pointer
}
.luxbar-hamburger span::before, .luxbar-hamburger span::after {
    content: '';
    position: absolute
}
.luxbar-hamburger span::before {
    margin-top: -8px
}
.luxbar-hamburger span::after {
    margin-top: 8px
}
.luxbar-checkbox {
    display: none
}
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
    overflow: hidden;
    height: 58px
}
.luxbar-checkbox:checked ~ .luxbar-menu {
    transition: height 0.6s ease;
    height: 100vh;
    overflow: auto
}

@media screen and (min-width: 768px) {
.luxbar-navigation {
    flex-flow: row;
    justify-content: flex-end;
    margin-bottom: 50px;
}
.luxbar-hamburger {
    display: none
}
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
    overflow: visible
}
.luxbar-checkbox:checked ~ .luxbar-menu {
    height: 58px
}
.luxbar-menu .luxbar-item {
    border-top: 0
}
.luxbar-menu-right .luxbar-header {
    margin-right: auto
}
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::before {
    transform: rotate(225deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::after {
    transform: rotate(-225deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::before {
    transform: rotate(45deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::after {
    transform: rotate(-45deg)
}

.luxbar-menu-material-green, .luxbar-menu-material-green .dropdown ul {
    background-color:#31AA64;
    color: #fff
}
.luxbar-menu-material-green .active, .luxbar-menu-material-green .luxbar-item:hover {
    background-color:#2CD53A;
}
.luxbar-menu-material-green .luxbar-hamburger span, .luxbar-menu-material-green .luxbar-hamburger span::before, .luxbar-menu-material-green .luxbar-hamburger span::after {
    background-color: #fff
}

.search-form {
  display: block;
  position: absolute;
  top:4px;
 width: 50%;
}
.search-form :before, .search-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 3em;
  height: 3em;
  margin: 0;
  border-radius: 1.5em;
  font-size: 1em;
}
.search-form :before {
  z-index: 100;
  line-height: 3em;
  background: #31AA64;
  color: #FFF;
  text-align: center;
}
.search-text {
  opacity: 0;
  z-index: 200;
  cursor: pointer;
  transition: .5s;
  outline: 0;
  border: solid 1px #ccc;
  border-radius: 1.5em;
  padding-left: 1em;
}
.search-text :focus {
  opacity: 1;
  width: 100%;
  cursor: text;
}
.search-form input[type="submit"] {
  display: none;
}
.search-icon{
  position: absolute;
  margin-left: 10;
  margin-top: 10;
}
.search-icon :not(img) {
    position: fixed;
    top: 0;
    left: 0;
}
</style>
</head>

<header id="luxbar" class="luxbar-fixed">
  <form method="get" class="search-form" action="" id="" action="">
    <input type="search" placeholder="フリーワードを入力" value="" name="q" class="search-text" />
    <input type="submit" value="Search" />
  </form>
  <div class="search-icon"><img src="img/search.svg" width="35" height="35" alt="サーチ"></div>

  <input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/>
  <div class="luxbar-menu luxbar-menu-right luxbar-menu-material-green">
    <ul class="luxbar-navigation">
      <li class="luxbar-header">
        <label class="luxbar-hamburger luxbar-hamburger-doublespin" id="luxbar-hamburger" for="luxbar-checkbox"><span></span></label>
      </li>
      <li class="luxbar-item"><a href="aaaa.html">aaaa</a></li>
      <li class="luxbar-item"><a href="bbbb.html">bbbb</a></li>
      <li class="luxbar-item"><a href="cccc.html">cccc</a></li>
      <li class="luxbar-item"><a href="dddd.html">dddd</a></li>
      <li class="luxbar-item"><a href="eeee.html">eeee</a></li>
      <li class="luxbar-item"><a href="ffff.html">ffff</a></li>
      <li class="luxbar-item"><a href="gggg.html">gggg</a></li>
    </ul>
  </div>
</header>
</html>

##自分で調べたことや試したこと
.luxbar-fixedのtop: 0;とleft: 0;が邪魔してると思い、:notを使ったり、
svgのアイコンがダメなのかと思い画像を変えてテストしたりしましたが、動きません。

行動規範の内容に同意します

回答2件

疑似要素の前にスペースが入力されている部分があるので、ひとまず修正された方がよいかと思います。
入力フォームは以下の記述部分によって表示される仕様のようですので、アイコンを中央配置しても以下フォーカスがされなければ想定の動作とはなりません。あわせて配置される必要があります。
中央配置の方法については既に回答されているとおりです。

CSS
1.search-text:focus {
2  opacity: 1;
3  width: 100%;
4  cursor: text;
5}

投稿2021/11/16 03:37

harami_

総合スコア128

yuuki0222

2021/11/16 04:15

ご指摘ありがとうございます。本番用に合わせて修正しようと思います。

行動規範の内容に同意します

ベストアンサー

css
1.search-icon{
2  position: absolute;
3  margin-left: 10;
4  margin-top: 10;
5}

単位を指定しないと無効です。例えばピクセル単位なら、

css
1.search-icon{
2  position: absolute;
3  margin-left: 10px;
4  margin-top: 10px;
5}

上下中央配置なら、目分量でマージン設定するより、下記のようにするといいでしょう。

css
1.search-icon{
2  position: absolute;
3  top: 50%;
4  transform: translatey(-50%);
5  left: 10px;
6  height: 35px;
7}

投稿2021/11/16 03:16

編集2021/11/16 03:25

hatena19

総合スコア34075

yuuki0222

2021/11/16 04:06

単位を入力するの忘れてました。初歩的なミスに気付かずお恥ずかしい限りです。回答していただきありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

アイコンの位置調整がしたい

関連した質問