サンプルアイコン

テスト

テスト

マークアップ

インライン

× H3-ICON ※ 要素にpadding上下がある場合はtop調整

H4-ICON

H5-ICON

P >ICON

P >ICON

P >ICON ic_theme_base

P >ICON size_12

P >ICON size_24

P >ICON size_36

× P >ICON after

P >A >ICON

P >A >ICON after

× P >ICON center

P >SPAN >ICON center

× P >ICON right

P >SPAN >ICON right

P >ICON big

P >SPAN >ICON big

P >ICON small

P >SPAN >ICON small

LIST

LIST-ICON

LIST-ICON

  • この文章はダミーです。完成までお読みにならないようお願い申し上げます。SPAN >ICONこの文章はダミーです。
    完成までお読みにならないようお願い申し上げます。SPAN >ICONこの文章はダミーです。完成までお読みにならないようお願い申し上げます。

MIXIN

第1引数と第2引数以外は名前付き引数で設定

セレクターに「position: relative;」自動付与

block, inline の場合 paddingが出力されるので上書きに注意

  • $type

    block || inline || self || icon * 第1引数 *必須

  • $icon

    アイコンのファイル名 ※「.svg」省略 * 第2引数

  • $size

    アイコン画像のサイズ

  • $color

    「original」でsvgのカラーがそのまま適用されます。* background-image になることに注意

  • $lr

    left || right* block,inlineのみ有効

  • $lr_p

    left や right の値

  • $ba

    before || after * 疑似要素を

MIXIN block MIXIN inline

MIXIN self

MIXIN icon

ul_icon

  • アイコンリストアイコン
    リストアイコンリストアイコンリスト
  • アイコンリストアイコンリストアイコンリストアイコンリスト
  • アイコンリストアイコン
    リストアイコンリストアイコンリスト
  • アイコンリストアイコンリストアイコンリストアイコンリスト

アイコン一覧

brand

Standard

angle_double_down

angle_double_left

angle_double_right

angle_down

angle_down_circle

angle_down_circle_line

angle_left

angle_left_circle

angle_left_circle_line

angle_right

angle_right_circle

angle_right_circle_line

angle_up

angle_up_circle

angle_up_circle_line

arrow_down

arrow_left

arrow_right

arrow_up

car

caret_down

caret_left

caret_right

caret_up

cart

change

change_circle

check

circle

circle_line

close

copy

date

delete

dot

dots

download

edit

excel

exclamation

eye

eye_close

facebook

facebook_square

favorite

fax

file

file_blank

folder

freedial

grip

home

illustrator

info_circle

instagram

line

line_square

link_blank

list

lock

lock_open

mail

map

members

message

message_fill

minus

minus_circle

modal

pagetop

pdf

photoshop

play

plus

plus_circle

question

search

sms

tel

train

twitter

twitter_square

twitterx

user

warning

word

wordpress

youtube

code-snippetd
	"oo_icon-v": {
		"prefix": "oo_icon-v ct22",
		"scope": "scss",
		"body": [
			"f.icon-v('${1|angle_double_down,angle_double_left,angle_double_right,angle_down,angle_down_circle,angle_down_circle_line,angle_left,angle_left_circle,angle_left_circle_line,angle_right,angle_right_circle,angle_right_circle_line,angle_up,angle_up_circle,angle_up_circle_line,arrow_down,arrow_left,arrow_right,arrow_up,car,caret_down,caret_left,caret_right,caret_up,cart,change,change_circle,check,circle,circle_line,close,copy,date,delete,dot,dots,download,edit,excel,exclamation,eye,eye_close,facebook,facebook_square,favorite,fax,file,file_blank,folder,freedial,grip,home,illustrator,info_circle,instagram,line,line_square,link_blank,list,lock,lock_open,mail,map,members,message,message_fill,minus,minus_circle,modal,pagetop,pdf,photoshop,play,plus,plus_circle,question,search,sms,tel,train,twitter,twitter_square,twitterx,user,warning,word,wordpress,youtube|}')",
		],
		"description": "@function ct22"
	},
	"oo_icon": {
		"prefix": "oo_icon ct22",
		"scope": "scss",
		"body": [
			"@include m.icon('${1|block,inline,self,icon|}', '${2|angle_double_down,angle_double_left,angle_double_right,angle_down,angle_down_circle,angle_down_circle_line,angle_left,angle_left_circle,angle_left_circle_line,angle_right,angle_right_circle,angle_right_circle_line,angle_up,angle_up_circle,angle_up_circle_line,arrow_down,arrow_left,arrow_right,arrow_up,car,caret_down,caret_left,caret_right,caret_up,cart,change,change_circle,check,circle,circle_line,close,copy,date,delete,dot,dots,download,edit,excel,exclamation,eye,eye_close,facebook,facebook_square,favorite,fax,file,file_blank,folder,freedial,grip,home,illustrator,info_circle,instagram,line,line_square,link_blank,list,lock,lock_open,mail,map,members,message,message_fill,minus,minus_circle,modal,pagetop,pdf,photoshop,play,plus,plus_circle,question,search,sms,tel,train,twitter,twitter_square,twitterx,user,warning,word,wordpress,youtube|}', $$size: ${3:20px});",
		],
	},
Snippet Copy
sass _global
$icon: "angle_double_down", "angle_double_left", "angle_double_right", "angle_down", "angle_down_circle", "angle_down_circle_line", "angle_left", "angle_left_circle", "angle_left_circle_line", "angle_right", "angle_right_circle", "angle_right_circle_line", "angle_up", "angle_up_circle", "angle_up_circle_line", "arrow_down", "arrow_left", "arrow_right", "arrow_up", "car", "caret_down", "caret_left", "caret_right", "caret_up", "cart", "change", "change_circle", "check", "circle", "circle_line", "close", "copy", "date", "delete", "dot", "dots", "download", "edit", "excel", "exclamation", "eye", "eye_close", "facebook", "facebook_square", "favorite", "fax", "file", "file_blank", "folder", "freedial", "grip", "home", "illustrator", "info_circle", "instagram", "line", "line_square", "link_blank", "list", "lock", "lock_open", "mail", "map", "members", "message", "message_fill", "minus", "minus_circle", "modal", "pagetop", "pdf", "photoshop", "play", "plus", "plus_circle", "question", "search", "sms", "tel", "train", "twitter", "twitter_square", "twitterx", "user", "warning", "word", "wordpress", "youtube";
$icon-brand: "";
Sass_global Copy

Parts

amazon_pay

amazon_pay_btn

card_americanexpress

card_dinersclub

card_jcb

card_mastercard

card_visa

fukidashi_m01

fukidashi_m02

fukidashi_m03

fukidashi_m04

fukidashi_m05

fukidashi_w01

fukidashi_w02

fukidashi_w03

fukidashi_w04

fukidashi_w05

icon_freedial

loading

noimage_icon

rakuten_pay

rakuten_pay_btn

scroll_horizon

select_arrow

star_1

star_1_0

star_1_5

star_2

star_2_0

star_2_5

star_3

star_3_0

star_3_5

star_4

star_4_0

star_4_5

star_5

star_5_0

pagetop
loading