Qiitaアイコンをhtmlに挿入したい

6291 ワード
HTML CSS Python Qiita Qiita テキストリンク

はじめに


この画像かわいいですよね！！
まだまだですが，ポートフォリオ作るときにQiitaのリンクをはろうと思ったのです．
ただ，公開されてるのがこれだけなので，とりあえず，貼るのにちょうどいい画像に変換してから，乗っけました．
３Dペイントとかも使えるみたいですがよくわからなかったのでpythonで画像加工のプログラムを書きました．
たぶん大丈夫だと思うのですが，これがガイドライン的にアウトだったら教えてください
早急に消します

pythonプログラム

import cv2
import numpy as np
from PIL import Image, ImageDraw, ImageFilter,ImageOps,ImageChops

# 元画像を読み込み最大値を255，最小値を0にする
im_gray = cv2.imread('qiita-icon.png', cv2.IMREAD_GRAYSCALE)
imtype = im_gray.dtype
im_gray -=np.min(im_gray)
valmax = 255 / np.min(im_gray)
im_gray = im_gray * valmax

# 白黒反転
im_gray = 255 - im_gray 
#型変換してしまうので元に戻す
im_gray = im_gray.astype(imtype)
#Image型に変換
img_p = Image.fromarray(im_gray)

# 黒画像を作り，アルファ値の設定
im_a = Image.new("RGB", img_p.size, (0,0,0))
im_a.putalpha(img_p)
crop = im_a.split()[-1].getbbox()
im_a.crop(crop)
im_a.save('qiita-icon.png')

htmlへの実装

html

<div class="btnce">
  <a href="https://qiita.com/#" class='btn'><img class="qiiicon" src="img/qiita-icon.png"/> Qiita</a>
</div>

css

  .qiiicon{
    height: 1rem;
    width: auto;
    filter: invert(100%);
  }

filterで色を変えたことくらい
他の色のやり方はafterとかなのでしょうか？
うまくいかなかったです
やり方知りたい...

結果

こんな感じになりました
まあまあいい感じにはなったと思うので及第点とします
少しずれてるのでアドバイスあればお願いします

参照

ブランドガイド
🖼【CSS】filterのみを使用して黒い画像を任意の色に変更する