Q&A
丁寧にありがとうございます。
.icon-camera:before というクラスがcssになかったため
new-age.min.cssの中に以下一文を記載しましたが変更されませんでした。
.icon-camera:before {
content: "\e07f";
-webkit-text-fill-color: yellow;
}
CSSよりbootstrapがあとに読み込まれてしまうのでしょうか？記載の方法が異なっていればすみませんがご教示頂けないでしょうか？
お世話になります。初心者です。CSSでアイコンの線の色を変更したいです。
#やりたいこと
以下４つのアイコン(スマホやカメラなど)の色がワイン色の線で描かれています。
このアイコンの線の色をワイン色ではなく、黄色にしたいです。
#ためしたこと
たとえば右上のカメラ部分は以下のようにコンテンツを指定することで画像が表示されるのですが
既存の色指定をしている場所がかわらずどのようにアイコンの線を黄色にすべきかわかりません。
.icon-camera:before { content: "\e07f"; }
お手数ですがご教示ください。
宜しくお願いします。
回答2件
0
ベストアンサー
section.features .feature-item iに対して
css
1 background: linear-gradient(to left,#7b4397,#dc2430);
が指定されています。
デベロッパーツールを使えるようになると便利です。
投稿2019/09/26 02:10
総合スコア3235
0
CSS
1.icon-camera:before { 2 content: "\e07f"; 3 -webkit-text-fill-color: yellow; 4}
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
投稿2019/09/26 02:12
総合スコア69596
section.features .feature-item i の -webkit-background-clip: text; を外せば color: yellow; で処理できます。
（上記コメントはコメントされる前の物です）
> .icon-camera:before というクラスがcssになかったため
提示されたコードを使ったのですが。デモサイトでは「.icon-screen-smartphone::before」とか指定されています。
ありがとうございます。
調べたところ以下のようにnew-age.min.cssは一番最後に読まれているため上書きされていることはなさそうです。
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<!-- Plugin CSS -->
<link rel="stylesheet" href="device-mockups/device-mockups.min.css">
<!-- Custom styles for this template -->
<link href="css/new-age.min.css" rel="stylesheet">
new-age.min.cssに以下を変更しても色は変更されませんでした。
.icon-screen-smartphone:before {
content: "\e07f";
color: yellow;
}
デベロッパーツールで確認してください。
（再掲）また、section.features .feature-item i の -webkit-background-clip: text; を外せば color: yellow; で処理できます。
以下のように色を変更しましたが色が変更されませんでした。
section.features .feature-item i {
font-size: 80px;
display: block;
margin-bottom: 15px;
background: linear-gradient(to left, yellow, yellow);
/* -webkit-background-clip: text;*/
color: yellow;
-webkit-text-fill-color: transparent
}
（再掲）デベロッパーツールで確認してください。
CSSが読み込まれているか、他の指定で上書きされていないかなど確認してください。
CSSは読み込まれていることは確認しました。
上述したようにCSSは上書きされていません。
以下のように色を変更しましたが色が変更されませんでした。
kei344さんの教えて頂いた以下コードで動きませんでしたので質問させて頂いております。
section.features .feature-item i {
font-size: 80px;
display: block;
margin-bottom: 15px;
background: linear-gradient(to left, yellow, yellow);
/* -webkit-background-clip: text;*/
color: yellow;
-webkit-text-fill-color: transparent
}
他で指定されているCSSを上書きする方法が間違っています。
.icon-screen-smartphone::before {
content: "\e07f";
-webkit-text-fill-color: yellow;
}
この指定でスマートフォンアイコンの物は色が変わると思いますが、変わらないならこちらの環境では調査できません。
そうですね。ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/09/26 02:17
退会済みユーザー
2019/09/26 02:33 編集
退会済みユーザー
2019/09/26 02:41
2019/09/26 03:21